使用FormData上传JavaScript Blob
使用FormData上传JavaScript Blob
提问于 2013-08-15 21:12:29
我在上传一个用javascript创建的blob到我的服务器时遇到了问题。其基本思想是用户上传一张图像，然后在javascript中居中裁剪图像，并在传输前对其进行下采样。
图像处理工作正常，但上传本身并不正常。下面是从canvas上传和转换到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()的结果
有人知道我做错了什么吗？有没有我应该使用的更好的方法？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-08-16 06:54:16
您的函数uploadCanvasData中有一个拼写错误，它应该为
formData.append("file", blob);仔细阅读你的代码！
Stack Overflow用户
发布于 2017-07-28 23:20:43
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);我希望您能在一个函数中完成所有这些操作，您将创建自己的函数，然后调用该函数
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18253378
复制相关文章
相似问题