Blob使用Ajax上传图片PHP,ajax – 使用FormData进行JavaScript Blob上传

我上传一个在

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()的结果,

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