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

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的一部分，但是我一生都找不到能够做到这一点的方法。

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

谢谢。

GOHarry猪猪2020/03/24 18:56:23

我遇到了与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 18:56:23

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

凯西里2020/03/24 18:56:23

不断发展的标准看起来是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 18:56:22

var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);

无需尝试即可使用。

谢谢check_ca。做得好。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer