JavaScript使用FormData上传Blob

Question

我遇到了一个问题，就是在JavaScript中创建的Blob文件无法上传到我的服务器。基本思路是用户上传一张图片，然后在JavaScript中对其进行居中裁剪并进行降采样处理，最后再传输。

图片操作已经正常工作了，但上传本身并没有正常运行。以下是执行上传和从画布转换为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 检查请求时，我看到请求的有效载荷为：

服务器声称未上传任何文件，当我使用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()的结果。

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

- Max Ehrlich

---

谢谢你提供dataURItoBlob函数。只使用new Blob([window.atob(png)], {type: 'image/png'})时，图像上传无法正常工作。 - Caslav Sabani

Answer 1

您在函数uploadCanvasData中存在一个拼写错误，应该改成

formData.append("file", blob);

仔细阅读你的代码！

- Max Ehrlich

Answer 2

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);

我希望你能创建一个函数来完成所有这些操作，然后调用该函数。

- Ir Calif