前端JS 实现文件Url、base64、File、Blob、ArrayBuffer相互转换方法

常见格式介绍

file对象 转换为 base64

let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)

base64 转换为 Blob

base64ToBlob(urlData) {
    
    
  let arr = urlData.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    
    
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    
     type: mime });
}

base64 转换为 file

base64toFile(dataurl, fileName) {
    
    
  let arr = dataurl.split(",");
  // let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    
    
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName);
}

Blob 转换为 blob地址

BlobToBlobURL(BlobFile，type) {
    
    
  let blob = new Blob([BlobFile], {
    
     type : type });// 图片："image/jpeg"
  const blobUrl = URL.createObjectURL(blob);
  return blobUrl ;
}

blob 转换为 ArrayBuffer

blobToArrayBuffer(){
    
    
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
    
    
    console.log(result);
}
reader.readAsArrayBuffer(blob);
}

buffer转换为 Blob

let blob = new Blob([buffer])

图片URL 转换为 blob和base64

urlToBlobBase64(imgUrl) {
    
    
  return new Promise((resolve) => {
    
    
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
    
    
      if (this.status == 200) {
    
    
        var blob = this.response;
        let oFileReader = new FileReader();
        oFileReader.onloadend = function (e) {
    
    
          resolve({
    
     blob, base64: e.target.result });
        };
        oFileReader.readAsDataURL(blob);
      } else {
    
    
        reject(new Error("异常"));
      }
    };
    xhr.send();
    xhr.onerror = () => {
    
    
      reject(new Error("异常"));
    };
  });
}

Blob 转 base64

 function blobToDataURI(blob,callback) {
    
    
   var reader = new FileReader();
   reader.readAsDataURL(blob);
   reader.onload = function (e) {
    
    
     callback(e.target.result);
   };
 }

// 调用
 blobToDataURI(blobData, function (result) {
    
    
    console.log(result);
});