Использование fetch api для загрузки изображения с использованием предустановленного URL amazon s3 - PullRequest
Новая
       9

Использование fetch api для загрузки изображения с использованием предустановленного URL amazon s3

0 голосов
/ 23 апреля 2020

Привет. Я пытаюсь, чтобы клиент загрузил свою фотографию в amazon s3 прямо в reactjs веб-приложении. Я генерирую предопределенный URL-адрес в бэкэнде, как этот 

def get_presigned_url(file_extension, content_type, user_id) do
  config = get_aws_s3_config()
  bucket = get_bucket_name()
  filename = create_s3_file_name(file_extension, user_id)
  query_params = [{"ContentType", content_type}]

  ExAws.S3.presigned_url(config, :put, bucket, filename, query_params: query_params)
end

, и сгенерированный URL выглядит следующим образом.

https://s3.us-west-1.amazonaws.com/churchapp-la/5/ab49d601efed40e0a6de0509ab78c091.png?ContentType=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=credentials%2Fus-west-1%2Fs3%2Faws4_request&X-Amz-Date=20200422T230320Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=68e0915ba1abb2722107c96b684e3a62f2e67aae9594bd4dece45132853f5be2 "

в клиенте я делаю так 

async function uploadImage(url, data, headers) {
    const response = await fetch(url, {
      method: "PUT",
      headers: headers,
      body: data
    });
    return response;
  }

const handleUpload = e => {
    const formData = new FormData();
    formData.append("image", file);

    const myHeaders = new Headers();
    myHeaders.append("ContentType", file.type);
    uploadImage(presignedUrl, formData, myHeaders)
      .then(data => console.log("Printing uploadImage result: ", data.url))
      .catch(error => {
        console.log("Error: ", error);
      });
  };

Когда я нажимаю кнопку загрузки, вызывается функция handleUpload и загружается на S3, но когда я пытался открыть файл, он не открывался. говорит, что подпись не совпадает.

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

Я установил только ContentType, и значение одинаково в обоих сторона ..

Есть идеи? Пожалуйста, помогите!

1 Ответ

0 голосов
/ 05 мая 2020

Вы должны установить Content-Type, а не ContentType в качестве имени заголовка в обоих местах.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type

...