解決new file()在IOS下不兼容問題

先看一下file的瀏覽器兼容問題

 

 解決方法

將base64轉成Blob再上傳

dataURLtoFile(dataurl, filename) {
    //轉成blob
    function dataURLtoBlob(toDataURL) {
        var arr = toDataURL.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        var blob = null;

        // 解決低版本瀏覽器沒有new Blob()問題
        try {
            blob = new Blob([u8arr], { type: mime });
        } catch (e) {
            var BlobBuilder = window.BlobBuilder = (
                window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder
            );

            if (e.name === "TypeError" && BlobBuilder) {
                var builder = new BlobBuilder();
                builder.append(u8arr);
                blob = builder.getBlob(mime);
            }
        }

        return blob;
    } 

    //轉成file
    function blobToFile(Blob, fileName) {
        Blob.lastModifiedDate = new Date();
        Blob.name = fileName;
        return Blob;
    }

    // 調用如下
    let bold = dataURLtoBlob(dataurl);
    let file = blobToFile(bold, "fileName");
    
    // 上傳file就可以了
    return file;
}

// ...
// 案例是截取視頻第一幀圖片
// file是視頻文件
var imgFile = that.dataURLtoFile(
    canvas.toDataURL("image/png"),
    file.name.split(".")[0] + ".png"
);
var fd = new FormData();
// 這里的第三個參數傳一個帶后綴名的文件名，避免認為不是有效的圖片文件
fd.append("file",imgFile,file.name.split(".")[0] + ".png");
$.ajax({
        type: "post",
        url: '上傳路徑',
        data: fd,
        contentType: false,
        processData: false  //這兩個屬性不能省
    })
    .then(res => {
        console.log('上傳成功');
    })