图片的base64,blob,file等格式的区别，转换以及使用场景

一.区别

Base64：Base64是一种用于表示二进制数据的文本编码方式。它将二进制数据转换为由大小写字母、数字和特殊字符组成的字符串。这样做可以方便在不支持二进制数据传输或存储的场合使用，如JSON、HTML等。

Blob：是一个代表大量二进制数据的对象，通常用于处理图片、音频、视频等文件。浏览器中的Blob对象可以通过URL.createObjectURL方法生成一个临时URL供其他API引用。

File：File对象继承自Blob对象，用于表示用户选择的或者从网络获取的文件。它包含了文件的名称、类型、修改时间等元数据，并可以作为参数传递给其他Web API进行处理。

二.相互转换

（1）base64转为blob对象：

function base64ToBlob(data) {
    
    
    var arr = data.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）base64转为file对象：

// 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
export function dataURLtoFile (dataurl, filename) {
    
    
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/u)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    
    
    u8arr[n] = bstr.charCodeAt(n)
  }
  const blob = new Blob([u8arr], {
    
     type: mime })
  return new File([blob], filename, {
    
     type: mime, lastModified: new Date() })
}

（3）blob转为base64

function blobToBase64(blob, callback) {
    
    
  var reader = new FileReader();
  reader.onload = function() {
    
    
    var dataUrl = reader.result;
    var base64 = dataUrl.split(',')[1];
    callback(base64);
  };
  reader.readAsDataURL(blob);
}

（4）blob转为file

function blobToFile(blob, fileName){
    
    
   var b = blob;
   b.lastModifiedDate = new Date();
   b.name = fileName;
   return new File([b], fileName); // 使用File构造函数创建一个新文件对象
}

(5)file转为base64

fileToBase64 = (file) => {
    
    
  const fileReader = new FileReader();
  fileReader.readAsDataURL(file);
  fileReader.onload = function () {
    
    
    return reader.result;
  };
};