Загрузить изображения на S3 не работает

Question

Я пытаюсь загрузить файлы на S3 без отправки на мой сервер. У меня есть конечная точка, которая дает мне подписанный URL S3, где я могу сделать запросы PUT для хранения файлов в моем ковше.

Я попытался сделать пару вещей на стороне JavaScript, которые не сработали. (Я не использую SDK Амазонки, и предпочитаю не делать этого, потому что я ищу простую загрузку файлов и не более того)

Вот что я пытаюсь сделать в настоящее время в JavaScript:

uploadToS3 =() => { 
    let file = this.state.files[0]; 
    let formData = new FormData(); 
    formData.append('Content-Type', file.type); 
    formData.append('file', file); 
    let xhr = new XMLHttpRequest(); 
    xhr.open('put', this.signed_url, true); 
    xhr.send(formData) 
}; 

Я пробовал кучу опций, я предпочитаю использовать выборку, потому что мне действительно не нравится процесс загрузки, поскольку это просто изображения. Я использовал xhr код откуда-то, чтобы попробовать, как описано выше. Они делают сетевые звонки и кажутся, что они должны работать, но они этого не делают.

Вот что происходит: объект создается на S3, когда я перехожу к общедоступному URL-адресу, они загружаются, и когда я использую средство просмотра изображений, чтобы открыть их, они говорят, что это неверный JPG.

Я думаю, что я не правильно загружаю.

Вот как я в почтальона:

Заметьте, что я правильно подписанный URL и я прилагается двоичный файл изображения на запрос. И добавил заголовок с указанием типа содержимого является изображение/JPEG, как показано ниже:

Когда я войти в S3 и иду в ведро, я могу видеть изображение, и я могу пойти на это публичный URL и вид в браузере. Это работает отлично и именно то, что я хочу, теперь я не знаю, как я мог бы добиться этого на JavaScript.

PS: Я даже пытался нажать на code на почтальоне, он не генерирует код файла для меня.

Answer 1

Проблема здесь начинается с xhr.send(formData).

Когда вы используете PUT файл на S3, вы вообще не используете структуры какой-либо формы, вы просто отправляете необработанные байты объекта в тело запроса.

Content-Type: и другие метаданные поступают в заголовки запроса, а не в виде данных в теле.

В этом случае, если вы загружаете загруженный файл и просматриваете его в текстовом редакторе, проблема должна быть очень очевидной, если вы видите, что ваш код действительно отправляет на S3, который S3 затем аккуратно хранит и обслуживает последующие Запросы.

Обратите внимание, что S3 имеет поддержку browser-based form POST uploads, но при этом процесс подписания существенно отличается, требуя, чтобы вы создали и подписали документ политики, чтобы вы могли отправить форму, включая политику и подпись, в браузера и разрешить другому пользователю, не доверяющему загрузке файла, - подписанный политический оператор запрещает пользователю браузера изменять форму и выполнять действия, которые вы не намеревались.