reactjs – React dropzone,如何上传图片？

发布时间：2020-12-15 20:50:14 所属栏目：百科来源：网络整理

导读：使用React dropzone,我使用onDrop回调成功访问了图像.但是,我正在尝试通过将图像发送到我的服务器,保存到S3存储桶,并将已签名的URL返回给客户端来上传到Amazon S3. 我不能用迄今为止的信息做到这一点,据我所知,文档似乎没有提到这一点. onDrop在我的redux操

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!