将数据URI转换为文件，然后追加到FormData

JavaScript HTML

Green番长

2020-03-24

我一直在尝试重新实现HTML5图像上传程序，例如Mozilla Hacks网站上的 HTML5图像上传程序，但是它可以与WebKit浏览器一起使用。任务的一部分是从canvas对象中提取图像文件，并将其附加到FormData对象以进行上传。

问题在于，虽然canvas具有toDataURL返回图像文件表示形式的功能，但FormData对象仅接受File API中的 File或Blob对象。

Mozilla解决方案在Firefox上使用了以下仅Firefox功能canvas：

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

...在WebKit浏览器上不可用。我能想到的最好的解决方案是找到一种将Data URI转换为File对象的方法，我认为这可能是File API的一部分，但是我一生都找不到能够做到这一点的方法。

可能吗？如果没有，还有其他选择吗？

谢谢。

第3693篇《将数据URI转换为文件，然后追加到FormData》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
GOHarry猪猪 2020.03.24

我遇到了与Ravinder Payal完全相同的问题，并且找到了答案。尝试这个：

var dataURL = canvas.toDataURL("image/jpeg");

var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataURL.substring(23)});
泡芙 2020.03.24

toDataURL给您一个字符串，您可以将该字符串放入隐藏的输入中。

凯西里 2020.03.24

不断发展的标准看起来是canvas.toBlob（）而不是canvas.getAsFile（），因为Mozilla可能会猜测。

我还没有浏览器支持它:(

感谢您的精彩发言！

另外，任何尝试接受答案的人都应该对BlobBuilder保持谨慎，因为我发现支持是有限的（并且是命名空间）：

    var bb;
    try {
        bb = new BlobBuilder();
    } catch(e) {
        try {
            bb = new WebKitBlobBuilder();
        } catch(e) {
            bb = new MozBlobBuilder();
        }
    }

您是否为BlobBuilder使用了另一个库的polyfill？

宝儿理查德 2020.03.24 
var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);

无需尝试即可使用。

谢谢check_ca。做得好。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android