base64轉file檔案的兩種方式

ZerlinM發表於2024-04-30

base64載入圖片檔案

使用base64可以不傳送請求將圖片檔案轉換為base64格式的連結渲染到圖片上,減少伺服器訪問次數,下面是base64載入圖片的方式

document.getElementById("front-file").onchange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    const imgURL = reader.result;
    const img = new Image();
    img.src = imgURL;
    document.getElementById("front-pic").setAttribute("src", imgURL);
  };
  reader.readAsDataURL(file);
};

base64轉file檔案

專案中需要實現把圖片的base64編碼轉成file檔案的功能，然後再上傳至伺服器。

有兩種方法:

1.直接透過new File()的方式進行轉換
(注:new File()方法不相容ios系統)

//將base64轉換為檔案
dataURLtoFile(dataurl, filename) { 
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}
 
//呼叫
var file = dataURLtoFile(base64Data, imgName);

2.將base64轉成blob ——> blob轉成file
(注:此方法不存在瀏覽器相容問題)

//將base64轉換為blob
dataURLtoBlob(dataurl) { 
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
 
//將blob轉換為file
blobToFile(theBlob, fileName){
   theBlob.lastModifiedDate = new Date();
   theBlob.name = fileName;
   return theBlob;
},
//呼叫
var blob = dataURLtoBlob(base64Data);
var file = blobToFile(blob, imgName);

相關文章