JavaScript的斑点上传与FORMDATA [英] JavaScript Blob Upload with FormData

问题描述

我有一个问题，在上传的javascript到我的服务器上创建一个blob。的基本思路是，用户上传的图像和在javascript我中心裁剪图像和传输之前下采样它

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.

图片处理工作正常，但上传本身是​​不工作的权利。这里是code，做的上传和转换，从画布到BLOB

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

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检查请求，我看到了请求负载为：

The server claims that no files were uploaded, and when I use chrome to examine the request, I see the request payload as:

------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"

[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--

在对比表格的提交与输入类型的有效载荷=文件

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--

因此​​，它看起来对我来说，在XMLHtt prequest只是上传调用的结果 blob.toString（）

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

Does anyone know what I am doing wrong here? Is there a better approach I should be using?

推荐答案

您已经在功能错字 uploadCanvasData 应该读

You have a typo in the function uploadCanvasData it should read

formData.append("file", blob);

了解您的code更小心！

Read your code more carefully!

这篇关于JavaScript的斑点上传与FORMDATA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！