React Dropzone，如何上传图片？

小编典典

React Dropzone，如何上传图片？

reactjs

使用React
dropzone，我已经使用onDrop回调成功访问了图像。但是，我试图通过将图像发送到我的服务器，保存到S3存储桶，然后将签名的URL返回图像到客户端，来上传到Amazon
S3。

我到目前为止无法获得这些信息，而据我所知文档似乎也没有提到这一点。

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
})

阅读 257

2020-07-22

共1个答案

小编典典

React Dropzone返回一个File对象数组，可以通过多部分请求将其发送到服务器。取决于您使用的库，可以执行不同的操作。

使用Fetch API，其外观如下：

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

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

使用Superagent，您将执行以下操作：

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

2020-07-22