Когда ваше веб-приложение должно управлять большим количеством изображений, вы должны помнить о влиянии, которое оно оказывает на ваш сервер. Это не только потребует ценного локального хранилища, но и может повлиять на производительность и повлечь за собой финансовые затраты.

В проекте, ориентированном на пользователей, загружающих изображения профилей, я реализовал решение на интерфейсе React. Вот рабочий процесс:

  1. Загрузите загруженный файл
  2. Отправить имя файла и тип файла на сервер
  3. Получите подписанный запрос из ваших учетных данных AWS.
  4. Доставьте файл изображения с подписанным запросом на S3 для хранения

Импорт необходимых библиотек

import $ from 'jquery';
import axios from 'axios';

Загрузите форму отправки изображения с помощью обработчика событий:

<form onSubmit={this.handleImgUpload.bind(this)} encType="multipart/form-data">
              <input type="file" onChange={this.handleFile.bind(this)} />

</form>

Получение события с файлом и последующий вызов обработчика загрузки изображения

handleFile(event) {
 const reader = new FileReader();
 reader.readAsDataURL(file);
 this.handleImgUpload(file);

Обработчик загрузки изображения, который получит подписанный запрос и доставит изображение на S3.
Примечание. Здесь мы показываем неотредактированные два метода запроса, потому что изначально у $.ajax были проблемы с возможностью вложения после промиса. Мы используем библиотеку axios, чтобы сделать запрос PUT на S3 с файлом изображения. Рекомендуется провести рефакторинг в один метод. Обновленный подход будет обновлен здесь, когда позволит время.

handleImgUpload(file) {
    // First Request to the server
    const promise = $.ajax({
      url: '/sign-s3',
      type: "GET",
      data: {
        'file-name': file.name,
        'file-type': file.type
      },
      dataType: 'json'
    });    
    // Promise returns with the signedRequest
    promise.done(function(data){
      var options = {
        headers: {
          'Content-Type': file.type
        }
      };
    // Upload the file with the signedRequest to S3
    axios.put(data.signedRequest, file, options)
      .then(function(){
        _this.setState({
          picLink: data.url,
          signedRequest: data.signedRequest
        });
      });
    });
}