使用FormData上传JavaScript Blob

Question

我在将使用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()

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

Answer 1

你uploadCanvasData应该阅读的函数有一个拼写错误

formData.append("file", blob);

更仔细地阅读您的代码!