JS中怎么將base64轉換成file

本篇內容主要講解“JS中怎么將base64轉換成file”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JS中怎么將base64轉換成file”吧!

js將base64轉換成file

dataURLtoBlob(dataurl, name) {//base64轉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轉file對象，將圖片轉Base64

//將圖片轉換為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轉換為文件對象
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);
  }
  //轉換成file對象
  return new File([u8arr], filename, {type:mime});
  //轉換成成blob對象
  //return new Blob([u8arr],{type:mime});
}
//將圖片轉換為base64,再將base64轉換成file對象
getImgToBase64('images/ruoshui.png',function(data){
　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
　　　console.log(myFile);
});
 
 
// 將 file 轉 base64
    blobToDataURL (blob, cb) {
      const reader = new FileReader()
      reader.onload = function (evt) {
        cb(evt.target.result)
      }
      reader.readAsDataURL(blob)
    },

js圖片base64轉file文件兩種方式

最近項目中需要實現把圖片的base64編碼轉成file文件的功能，然后再上傳至服務器。起初是直接通過new File()的方式進行轉換，在各個主流的瀏覽器基本上都支持，Android也沒問題，但是在ios系統埋了個坑，ios11.4以下的系統上傳失敗。

定位bug發現是new File()這個方法不兼容ios系統，只能另辟蹊徑，最后找到一個方法就是：

將base64轉成blob ——> blob轉成file

這種方式測試通過，解決了new File()不兼容ios系統問題。

下面將base64轉file文件兩種方式的代碼貼出來：

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

    //將base64轉換為文件
    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 });
    },
 
 
    //調用
    var file = dataURLtoFile(base64Data, imgName);

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

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

目前方法二在項目中已經可以正常使用。

到此，相信大家對“JS中怎么將base64轉換成file”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！