我在将 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()
有谁知道我在这里做错了什么?我应该使用更好的方法吗?