Question

我使用原生javascript方法将图片上传到Express服务器。我的应用程序中有两种类型的上传。

上传取自<input type=file>
上传从<canvas>

我对firefox，chrome和safari的第一种上传方式没有任何问题。文件图像正确上传，我可以查看上传到服务器的文件。

但是，第二种上传方式有问题。我无法使用Safari浏览器正确上传文件。它总是会在服务器中生成一个0字节的文件。但它在firefox和chrome上都运行良好。

以下是我的代码片段：

const content = canvasRef.toDataURL()
const file = convertDataURLToFile(content, "signature.png");
fileUploadHelper(file, fileUploadUrl(), "signature");

function convertDataURLToFile (file, fileName) {
    const blobBin = window.atob(file.split(",")[1]);
    const array = [];
    for (var i = 0; i < blobBin.length; i++) {
        array.push(blobBin.charCodeAt(i));
    }
    return new window.File([new Uint8Array(array)], fileName, {type: "image/png"});
};

function fileUploadHelper (file, url, inputType) {
    const xhr = new window.XMLHttpRequest();
    const formData = new window.FormData();
    formData.append("file", file);
    xhr.open("POST", `${url}&documentType=${inputType}`);
    xhr.send(formData);
};

Express代码段：

app.post("/fileUpload", function (req, res) {
    req.pipe(req.busboy);
    req.busboy.on("file", function (fieldname, file, filename) {
        file.on("data", function (data) {
            console.log(data.length);
        });
        var fstream = fs.createWriteStream("./tempFiles/" + filename);
        file.pipe(fstream);
        fstream.on("close", function () {
            var response = clone(baseResponse);
            response.status = SUCCESS;
            return res.end(JSON.stringify(response));
        });
    });
});

所以我正在做的是使用toDataURL()从画布中获取base64，然后将其转换为文件对象，然后将其附加到FormData对象，然后将其上传到服务器{{1} 1}}。

此方法适用于Chrome和Firefox，但不适用于Safari。在任何地方都没有抛出任何错误。有谁知道为什么？

Answer 1

如果使用canvas.toBlob()没有问题，使用<input type=file>时不会出现问题。 File对象继承自Blob对象。 FormData会将Blob转换为File个对象。

    canvas.toBlob(function(blob) {
       var formData = new FormData();
       // `xhr` settings
const xhr = new window.XMLHttpRequest();
       const formData = new window.FormData();
       // if you want to convert `blob` to `File`
       // const file = new window.File([blob], "signature.png", {type: blob.type});
       formData.append("file", blob /* or `file` */);
       xhr.open("POST", `${url}&documentType=${inputType}`);
       xhr.send(formData);
    }, "image/png")

在Safari中上传图片无法正常工作

1 个答案: