Это будет длинный пост, но, поскольку я понятия не имею, где что-то идет не так, я думаю, что лучше быть слишком многословным, чем опускать важную информацию.
Я пытаюсь загрузить изображенияв мое ведро Amazon S3 согласно этому руководству: https://devcenter.heroku.com/articles/s3-upload-python.
Я настроил свой код следующим образом:
index.html
<img id="preview" src="https://via.placeholder.com/320?text=Image+Upload">
<input id="file_input" class="form-control" type="file" name="image" accept="image/*">
<form method="POST" action="/gallery/upload" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="lVE...ASG">
<input type="hidden" id="image-url" name="image-url">
<input class="form-control" type="text" name="title" placeholder="Title">
<input class="form-control" type="text" name="price" placeholder="Price">
<div class="form-control">
<input type="checkbox" name="archive" value="True">
<label for="archive">Archive</label>
</div>
<input class="form-control btn-primary" type="submit">
</form>
s3.js
function uploadFile(file, s3Data, url) {
var xhr = new XMLHttpRequest();
xhr.open("POST", s3Data.url);
var postData = new FormData();
for (key in s3Data.fields) {
postData.append(key, s3Data.fields[key]);
}
postData.append('file', file);
for (var [key, value] of postData.entries()) {
console.log(key + ': ' + value);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 204) {
document.getElementById("preview").src = url;
document.getElementById("image-url").value = url;
}
else {
alert("Could not upload file.");
}
}
};
xhr.send(postData);
}
function getSignedRequest(file) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/gallery/sign_s3?file_name="
+ file.name + "&file_type=" + file.type);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
uploadFile(file, response.data, response.url);
}
else {
alert("Could not get signed URL.");
}
}
};
xhr.send();
}
$(document).ready(function () {
(function () {
document.getElementById("file_input").onchange = function () {
var files = document.getElementById("file_input").files;
var file = files[0];
if (!file) {
return alert("No file selected.");
}
getSignedRequest(file);
};
})();
});
views.py
S3_BUCKET = os.environ.get('S3_BUCKET')
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
s3 = boto3.client(
's3',
aws_access_key_id=AWS_ACCESS_KEY_ID,
aws_secret_access_key=AWS_SECRET_ACCESS_KEY,
)
def sign_s3(request):
file_name = request.GET.get('file_name')
file_type = request.GET.get('file_type')
presigned_post = s3.generate_presigned_post(
Bucket=S3_BUCKET,
Key=file_name,
Fields={"acl": "public-read", "Content-Type": file_type},
Conditions=[
{"acl": "public-read"},
{"Content-Type": file_type}
],
ExpiresIn=3600
)
return JsonResponse({
'data': presigned_post,
'url': 'https://%s.s3.amazonaws.com/%s' % (S3_BUCKET, file_name)
})
Когда я выбираю изображение с загрузчиком файлов, я получаюпредупреждение «Не удалось загрузить файл» вместе со следующим выводом из консоли разработчика Chrome:
acl: public-read
Content-Type: image/jpeg
key: dragon.jpg
x-amz-algorithm: AWS4-HMAC-SHA256
x-amz-credential: AKI...TRA/20190224/us-east-2/s3/aws4_request
x-amz-date: 20190224T044659Z
policy: eyJ...XX0=
x-amz-signature: 7ea...18a
file: [object File]
Похоже, предварительная подпись прошла, но я получаю этот XML как ответ от загрузки:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>5D1...AB5</RequestId>
<HostId>cYX...WKw=</HostId>
</Error>
Моя политика CORS очень мягкая (я планирую изменить это позже, но сейчас я хочу предотвратить ограничение доступа):
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Я попытался изменитьПолитика Bucket, но я все еще получаю ошибку «Отказано в доступе».Это руководство было бесполезным: https://aws.amazon.com/premiumsupport/knowledge-center/s3-access-denied-bucket-policy/
Я не знаю, что является причиной этого, но я предполагаю, что где-то есть проблема с разрешениями.Я не знаю где.Любая помощь приветствуется.
Редактировать: Пользовательские политики: AdministratorAccess и AmazonS3FullAccess.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "*",
"Resource": "*"
}
]
}
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "s3:*",
"Resource": "*"
}
]
}
Редактировать 2: Я смог внести изменения в свою политику сегментов, сняв флажок «Блокировать новые общие политики сегментов» в настройках общего доступа.Установка этого значения более не приводила к появлению сообщения об ошибке «Отказано в доступе» на странице «Политика Bucket», но я все еще не могу загрузить файл через XHR:
{
"Id": "Policy...237",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt...935",
"Action": "s3:*",
"Effect": "Allow",
"Resource": "arn:aws:s3:::coolwater-creations/*",
"Principal": {
"AWS": [
"...764"
]
}
}
]
}