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