base64、file和blob用JS进行互转的方法大全【前端】

前言： 作为前端项目开发，经常会遇到图片文件的处理，下面总结一下关于 Base64、File对象和Blob 的相互转换大全。让我们一起学习吧！

1. file 对象转 base64

/** * file 对象转 base64 * @param file * @param callback */export const fileToBase64 = (file, callback) => {  const fileReader = new FileReader();  fileReader.readAsDataURL(file);  fileReader.onload = function () {    callback(this.result);  };};

2. base64 直接转换为 file

/** * base64 转换为 file * 先将base64转换成blob，再将blob转换成file文件，此方法不存在浏览器不兼容问题 * @param base64Url * @param filename * @returns */export const base64UrlToFile = (base64Url, filename) => {  // 获取到base64编码  const arr = base64Url.split(',');  const mime = arr[0].match(/:(.*?);/)[1];  // 将base64编码转为字符串  const bstr = atob(arr[1]);  let n = bstr.length;  // 创建初始化为0的，包含length个元素的无符号整型数组  const u8arr = new Uint8Array(n);  while (n--) {    u8arr[n] = bstr.charCodeAt(n);  }  return new File([u8arr], filename, { type: mime });};

3. base64 转换成 blob

/** * base64 转换成 blob * @param dataUrl * @returns */export const dataURLtoBlob = dataUrl => {  const arr = dataUrl.split(',');  const mime = arr[0].match(/:(.*?);/)[1];  const bstr = atob(arr[1]);  let n = bstr.length;  const u8arr = new Uint8Array(n);  while (n--) {    u8arr[n] = bstr.charCodeAt(n);  }  return new Blob([u8arr], { type: mime });};

4. blob 转换为 file

/** * blob 转换为 file * @param blobObj * @param fileName * @returns */export const blobToFile = (blobObj, fileName) => {  blobObj.lastModifiedDate = new Date(); // 文件最后的修改日期  blobObj.name = fileName; // 文件名  return new File([blobObj], fileName, { type: blobObj.type, lastModified: Date.now() });};

5. base64 转 file 对象【仅思路步骤，实质同上的直转一样】

/** * base64 转换成 blob * @param dataUrl * @returns */export const dataURLtoBlob = dataUrl => {  const arr = dataUrl.split(',');  const mime = arr[0].match(/:(.*?);/)[1];  const bstr = atob(arr[1]);  let n = bstr.length;  const u8arr = new Uint8Array(n);  while (n--) {    u8arr[n] = bstr.charCodeAt(n);  }  return new Blob([u8arr], { type: mime });};/** * blob 转换为 file * @param blobObj * @param fileName * @returns */export const blobToFile = (blobObj, fileName) => {  blobObj.lastModifiedDate = new Date(); // 文件最后的修改日期  blobObj.name = fileName; // 文件名  return new File([blobObj], fileName, { type: blobObj.type, lastModified: Date.now() });};/** * base64 转 file 对象 * // 先将base64转换成blob，再将blob转换成file文件，此方法不存在浏览器不兼容问题 * @param dataUrl * @param fileName * @returns */export const base64ToFile = (dataUrl, fileName) => {  const theBlob = dataURLtoBlob(dataUrl);  return blobToFile(theBlob, fileName);};