在Safari中上傳圖片不起作用

Question

我正在使用原生JavaScript方法將圖片上傳到Express服務器。在我的應用程序中有兩種類型的上傳。從<input type=file>

上傳圖像拍攝

1. 上傳文件對象取用<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); 
}; 

快遞片段：

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對象上，然後將其上傳到服務器XMLHttpRequest。

此方法適用於Chrome和Firefox，但不適用於Safari。根本沒有任何錯誤發生。有誰知道爲什麼？

Answer 1

如果使用<input type=file>沒有問題，則不應該存在使用canvas.toBlob()的問題。 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")