Html 使用 FormData 上传 JavaScript Blob
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18253378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript Blob Upload with FormData
提问by Max Ehrlich
I am having a problem uploading a blob created in javascript to my server. The basic idea is that a user uploads an image and in javascript I center crop the image and downsample it before transmission.
我在将 javascript 创建的 blob 上传到我的服务器时遇到问题。基本思想是用户上传图像，然后在 javascript 中将图像居中裁剪并在传输之前对其进行下采样。
The image manipulation is working fine, but the upload itself is not working right. Here is the code that does the upload and conversion from canvas to blob
图像处理工作正常，但上传本身无法正常工作。这是从画布上传和转换为 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;
}
The server claims that no files were uploaded, and when I use chrome to examine the request, I see the request payload as:
服务器声称没有上传任何文件，当我使用 chrome 检查请求时，我看到请求负载为：
------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"
[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--
In contrast to the payload of a form being submitted with input type="file"
与提交的表单的有效负载相反 input type="file"
------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--
So it looks to me like the XMLHttpRequest is just uploading the result of calling blob.toString()
所以在我看来 XMLHttpRequest 只是上传调用的结果 blob.toString()
Does anyone know what I am doing wrong here? Is there a better approach I should be using?
有谁知道我在这里做错了什么？我应该使用更好的方法吗？
回答by Max Ehrlich
You have a typo in the function uploadCanvasDatait should read
你在uploadCanvasData它应该读取的函数中有一个错字
formData.append("file", blob);
Read your code more carefully!
更仔细地阅读你的代码！
回答by Ir Calif
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});
}
create an xmlhttpRequest
创建一个 xmlhttpRequest
let uriPost ="active.php";
let xhrPost =new XMLHttpRequest();
then do this it easy
然后就轻松搞定
var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);
I hope you'l do all this in a function that you will create your self then call that function
我希望你能在一个函数中完成所有这些，你将创建你自己然后调用该函数
