javascript - 如何将 dataURL 转换为 javascript 中的文件对象？

Question

我需要将 dataURL 转换为 Javascript 中的文件对象，以便使用 AJAX 发送它。可能吗？如果是，请告诉我怎么做。

Answer 1

如果你需要通过 ajax 发送它，那么就不需要使用 File 对象，只需要 Blob 和 FormData 对象.

正如我旁注的那样，您为什么不通过 ajax 将 base64 字符串发送到服务器并将其转换为二进制服务器端，例如使用 PHP 的 base64_decode？无论如何，符合标准的代码来自 this answer适用于 Chrome 13 和 WebKit nightlies:

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

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

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

    //Old Code
    //write the ArrayBuffer to a blob, and you're done
    //var bb = new BlobBuilder();
    //bb.append(ab);
    //return bb.getBlob(mimeString);

    //New Code
    return new Blob([ab], {type: mimeString});


}

然后只需将 blob 附加到新的 FormData 对象并使用 ajax 将其发布到您的服务器:

var blob = dataURItoBlob(someDataUrl);
var fd = new FormData(document.forms[0]);
var xhr = new XMLHttpRequest();

fd.append("myFile", blob);
xhr.open('POST', '/', true);
xhr.send(fd);