Safariで画像をアップロードできない

Question

私は、ネイティブのjavascriptメソッドを使用して、Expressサーバーに画像をアップロードしています。私のアプリケーションには2種類のアップロードがあります。

1. <canvas>

から採取描か<input type=file>

アップロード画像から取られたアップロード・ファイル・オブジェクトIは、Firefox、クロムとサファリのアップロードの最初のタイプの問題はありません。ファイルイメージが正しくアップロードされていて、サーバーにアップロードされたファイルを表示できます。

しかし、私はアップロードの2番目のタイプに問題があります。私はサファリブラウザを使用してファイルを正しくアップロードできません。これは、常にサーバー内に0バイトのファイルを生成します。しかし、それはファイヤーフォックスとクロームの両方でうまくいきます。

は、ここに私のコードの抜粋です：

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を取得し、ファイルオブジェクトに変換されてやっていますXMLHttpRequestを使用してサーバーにアップロードする前に、FormDataオブジェクトに添付します。

この方法は、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")