ajax – 使用FormData进行JavaScript Blob上传
发布时间:2020-12-16 03:06:43 所属栏目:百科 来源:网络整理
导读:我上传一个在 javascript中创建的blob到我的服务器有问题.基本思想是用户上传图像,在javascript中,裁剪图像并在传输之前对其进行缩小. 图像处理工作正常,但上传本身不正常.以下是从canvas到blob的上传和转换的代码 function uploadCanvasData(){ var canvas
我上传一个在
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-- 与输入type =“file”提交的表单的有效内容相反, ------WebKitFormBoundaryUOn3WXb7pKLmOxRZ Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryUOn3WXb7pKLmOxRZ-- 所以看起来像我的XMLHttpRequest只是上传调用blob.toString()的结果, 有谁知道我在这里做错什么?我应该使用更好的方法吗?
你应该读取函数uploadCanvasData中的打字错误
formData.append("file",blob); 仔细阅读你的代码! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |