快捷導(dǎo)航

JS中如何將base64轉(zhuǎn)換成file

更新時(shí)間：2023年04月17日 09:36:54 作者：前端程序猿i

這篇文章主要介紹了JS中如何將base64轉(zhuǎn)換成file的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

js將base64轉(zhuǎn)換成file

dataURLtoBlob(dataurl, name) {//base64轉(zhuǎn)file
      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], name, {
        type: mime,
      })
    },

this.dataURLtoBlob(imgDataUrl,name)//imgDataUrl是base64格式編碼  name是圖片名字

將Base64轉(zhuǎn)file對(duì)象，將圖片轉(zhuǎn)Base64

//將圖片轉(zhuǎn)換為Base64
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}
 
//將base64轉(zhuǎn)換為文件對(duì)象
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length; 
  var u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  //轉(zhuǎn)換成file對(duì)象
  return new File([u8arr], filename, {type:mime});
  //轉(zhuǎn)換成成blob對(duì)象
  //return new Blob([u8arr],{type:mime});
}
//將圖片轉(zhuǎn)換為base64,再將base64轉(zhuǎn)換成file對(duì)象
getImgToBase64('images/ruoshui.png',function(data){
　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
　　　console.log(myFile);
});
 
 
// 將 file 轉(zhuǎn) base64
    blobToDataURL (blob, cb) {
      const reader = new FileReader()
      reader.onload = function (evt) {
        cb(evt.target.result)
      }
      reader.readAsDataURL(blob)
    },

js圖片base64轉(zhuǎn)file文件兩種方式

最近項(xiàng)目中需要實(shí)現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能，然后再上傳至服務(wù)器。起初是直接通過(guò)new File()的方式進(jìn)行轉(zhuǎn)換，在各個(gè)主流的瀏覽器基本上都支持，Android也沒(méi)問(wèn)題，但是在ios系統(tǒng)埋了個(gè)坑，ios11.4以下的系統(tǒng)上傳失敗。

定位bug發(fā)現(xiàn)是new File()這個(gè)方法不兼容ios系統(tǒng)，只能另辟蹊徑，最后找到一個(gè)方法就是：

將base64轉(zhuǎn)成blob ——> blob轉(zhuǎn)成file

這種方式測(cè)試通過(guò)，解決了new File()不兼容ios系統(tǒng)問(wèn)題。

下面將base64轉(zhuǎn)file文件兩種方式的代碼貼出來(lái)：

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

? ? //將base64轉(zhuǎn)換為文件
? ? dataURLtoFile: function(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 });
?? ?},
?
?
? ? //調(diào)用
? ? var file = dataURLtoFile(base64Data, imgName);

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

? ? //將base64轉(zhuǎn)換為blob
? ? dataURLtoBlob: function(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轉(zhuǎn)換為file
? ? blobToFile: function(theBlob, fileName){
? ? ? ?theBlob.lastModifiedDate = new Date();
? ? ? ?theBlob.name = fileName;
? ? ? ?return theBlob;
? ? },
? ? //調(diào)用
? ? var blob = dataURLtoBlob(base64Data);
? ? var file = blobToFile(blob, imgName);

目前方法二在項(xiàng)目中已經(jīng)可以正常使用。