快捷導(dǎo)航

JS中將圖片base64轉(zhuǎn)file文件的兩種方式

更新時間：2023年02月17日 10:41:41 作者：C_心欲無痕

這篇文章主要介紹了JS中圖片base64轉(zhuǎn)file文件的兩種方式,實現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能，然后再上傳至服務(wù)器，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.通過new File()將base64轉(zhuǎn)換成file文件，此方式需考慮瀏覽器兼容問題

	=====================1,把base64編碼轉(zhuǎn)為文件對象==========================
	第一個參數(shù)dataUrl是一個base64的字符串。第二個參數(shù)是文件名可以隨意命名
    funtion base64toFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      // suffix是該文件的后綴
      let suffix = mime.split('/')[1];
      // atob 對經(jīng)過 base-64 編碼的字符串進行解碼
      let bstr = atob(arr[1]);
      // n 是解碼后的長度
      let n = bstr.length;
      // Uint8Array 數(shù)組類型表示一個 8 位無符號整型數(shù)組 初始值都是 數(shù)子0
      let u8arr = new Uint8Array(n);
      // charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數(shù)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      // new File返回File對象 第一個參數(shù)是 ArraryBuffer 或 Bolb 或Arrary 第二個參數(shù)是文件名
      // 第三個參數(shù)是 要放到文件中的內(nèi)容的 MIME 類型
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },

2.先將base64轉(zhuǎn)換成blob，再將blob轉(zhuǎn)換成file文件，此方法不存在瀏覽器不兼容問題

methods:{
 	//1,先將base64轉(zhuǎn)換為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 });
    },
    //2,再將blob轉(zhuǎn)換為file
    blobToFile(theBlob, fileName){
       theBlob.lastModifiedDate = new Date();  // 文件最后的修改日期
       theBlob.name = fileName;                // 文件名
       return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
    },

}

vue中配合vant的uploader上傳組件使用案例：

	/* 單個文件上傳案例 */
    afterRead(file) {
      // 1.先轉(zhuǎn)為 blob格式  file.content是此文件的base64格式 
      let blob =  this.dataURLtoBlob(file.content);
      // 拿到文件名
      let fileName = file.file.name;
 
      // 2，在轉(zhuǎn)為 file類型
      let file1 = this.blobToFile(blob,fileName);
      console.log("file1:",file1);
      
	 // 3,上傳...
    },

打印結(jié)果如下：

在這里插入圖片描述