相关疑难解决方法(0)

我一直在尝试重新实现像Mozilla Hacks网站上的 HTML5图像上传器,但它适用于WebKit浏览器.部分任务是从canvas对象中提取图像文件并将其附加到FormData对象以进行上载.

问题是虽然canvas具有toDataURL返回图像文件表示的函数,但FormData对象仅接受来自File API的 File或Blob对象.

Mozilla解决方案使用以下仅限Firefox的功能canvas:

var file = canvas.mozGetAsFile("foo.png");

...在WebKit浏览器上不可用.我能想到的最好的解决方案是找到一种方法将数据URI转换为File对象,我认为它可能是File API的一部分,但我不能为我的生活找到一些东西.

可能吗？如果没有,任何替代方案？

谢谢.

我有一个以BUCKET区域命名的S3存储桶BUCKET_REGION.我试图允许我的网络和移动应用程序的用户将图像文件上传到这些存储桶,前提是它们满足基于Content-Type和的某些限制Content-Length(即,我希望仅允许上传小于3mbs的jpegs).上传后,文件应公开访问.

基于对AWS文档的相当广泛的挖掘,我假设在我的前端应用程序中该过程看起来应该是这样的:

const a = await axios.post('my-api.com/get_s3_id');

const b = await axios.put(`https://{BUCKET}.amazonaws.com/{a.id}`, {
   // ??
   headersForAuth: a.headersFromAuth,
   file: myFileFromSomewhere // i.e. HTML5 File() object
});

// now can do things like <img src={`https://{BUCKET}.amazonaws.com/{a.id}`} />
// UNLESS the file is over 3mb or not an image/jpeg, in which case I want it to be throwing errors

在我的后端API我会做的事情

import aws from 'aws-sdk';
import uuid from 'uuid';
app.post('/get_s3_id', (req, res, next) => {
  // do …