作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 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);
关于reactjs - React dropzone,如何上传图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41025078/
我有以下正则表达式 /[a-zA-Z0-9_-]/ 当字符串只包含从 a 到z 大小写、数字、_ 和 -。 我的代码有什么问题? 能否请您向我提供一个简短的解释和有关如何修复它的代码示例? //var
我是一名优秀的程序员,十分优秀!