React dropzone, как загрузить изображение?

используя React dropzone, я успешно получил доступ к изображению с помощью onDrop обратный. Тем не менее, я пытаюсь загрузить в Amazon S3, отправив изображение на свой сервер, сохранив его в ведре S3 и вернув подписанный url-адрес изображения клиенту.

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

onDrop запускает вызов функции в моих действиях redux с помощью файлы:

export function saveImageToS3 (files, user) {
  file = files[0]
  // file.name -> filename.png
  // file -> the entire file object
  // filepreview -> blob:http:localhost:3000/1ds3-sdfw2-23as2

  return {
    [CALL_API] : {
      method:'post',
      path: '/api/image',
      successType: A.SAVE_IMAGE,
      body: {
        name: file.name,
        file: file,
        preview: file.preview,
        username: user
      }
    }
  }
}

однако, когда я добираюсь до своего сервера, я не уверен, как сохранить это изображение blob (это только ссылка из браузера.)

 server.post('/api/image', (req, res) => {
  // req.body.preview --> blob:http://localhost:3000/1ds3-sdfw2-23as2
  // req.body.file -> {preview:blob:http://localhost:3000/1ds3-sdfw2-23as2}, no other properties for some reason
})
8
amazon-s3 react-redux reactjs

1 ответов

React Dropzone возвращает массив объекты, которые могут быть отправлены на сервер с составной запрос. В зависимости от используемой библиотеки это можно сделать по-разному.

используя получить API-интерфейс выглядит следующим образом:

var formData = new FormData();
formData.append('file', files[0]);

fetch('http://server.com/api/upload', {
  method: 'POST',
  body: formData
})

используя суперагент вы бы сделали что-то вроде:

 var req = request.post('/api/upload');
 req.attach(file.name, files[0]);
 req.end(callback);
11