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

发布于02月24日

我一直在try 重新实现一个HTML5图像上传程序，比如one on the Mozilla Hacks网站，但它适用于WebKit浏览器.部分任务是从canvas对象中提取一个图像文件，并将其附加到FormData对象中进行上传.

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

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

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

.这在WebKit浏览器上不可用.我能想到的最好的解决方案是找到某种方法将数据URI转换为File对象，我认为它可能是File API的一部分，但我无论如何也找不到这样做的方法.

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

谢谢.

推荐答案

在玩了一些东西之后，我自己设法弄明白了这一点.

首先，这会将dataURI转换为Blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

从这里开始，将数据附加到表单中，以便将其作为文件上传是很容易的:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);