使用 FormData 上传 JavaScript Blob

Posted 2023-02-27

【中文标题】使用 FormData 上传 JavaScript Blob

【英文标题】：JavaScript Blob Upload with FormData

【发布时间】：2013-08-17 16:23:56

【问题描述】：

我在将 javascript 中创建的 blob 上传到我的服务器时遇到问题。基本思想是用户上传一张图片，然后在 javascript 中我居中裁剪图片并在传输前对其进行下采样。

图像处理工作正常，但上传本身无法正常工作。这是从画布上传和转换为 blob 的代码

function uploadCanvasData()

    var canvas = $('#ImageDisplay').get(0);
    var dataUrl = canvas.toDataURL("image/jpeg");

    var blob = dataURItoBlob(dataUrl);

    var formData = new FormData();
    formData.append("file", formData);

    var request = new XMLHttpRequest();
    request.onload = completeRequest;

    request.open("POST", "IdentifyFood");
    request.send(formData);


function dataURItoBlob(dataURI)

    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++)
    
        ia[i] = byteString.charCodeAt(i);
    

    var bb = new Blob([ab],  "type": mimeString );
    return bb;

服务器声称没有上传任何文件，当我使用 chrome 检查请求时，我看到请求负载为：

------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"

[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--

与使用input type="file" 提交的表单的有效负载相比

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--

所以在我看来，XMLHttpRequest 只是上传调用blob.toString()的结果

有谁知道我在这里做错了什么？我应该使用更好的方法吗？

【问题讨论】：

嘿，谢谢你的 dataURItoBlob 函数。图片上传无法正常使用 new Blob([window.atob(png)], type: 'image/png');

【参考方案1】：

您在函数uploadCanvasData 中有错字，它应该是

formData.append("file", blob);

更仔细地阅读你的代码！

【参考方案2】：

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);

创建一个 xmlhttpRequest

let uriPost   ="active.php";
let xhrPost   =new XMLHttpRequest();

那就轻松搞定

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

我希望你能在一个函数中完成所有这些，你将创建自己然后调用该函数