React Dropzone，如何上传图片? [英] React dropzone, how to upload image?

问题描述

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

Using React dropzone, I've successfully accessed the image using the onDrop callback. However, I'm trying to upload to Amazon S3 by sending the image to my server, saving to an S3 bucket, and returning a signed url to the image back to the client.

我无法利用到目前为止的信息来做到这一点，并且据我所知文档似乎也没有提到这一点.

I can't do this with the information I have so far and the docs don't seem to mention this to my knowledge.

onDrop在我的redux动作中触发以下文件的函数调用:

onDrop triggers a function call in my redux actions with the files:

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图像(仅从浏览器中引用).

However, when I get to my server, I'm not sure how to save this blob image (that's only referenced from the browser.)

 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返回文件对象，可以通过多部分请求将其发送到服务器.取决于您使用的库，可以执行不同的操作.

React Dropzone returns an array of File objects which can be sent to a server with a multi-part request. Depend on the library you use it can be done differently.

使用获取API ，它看起来如下:

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

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

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

Using Superagent you would do something like:

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

这篇关于React Dropzone，如何上传图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！