vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue图片file、base64与blob之间相互转换

vue图片file、base64与blob之间相互转换过程

作者:梨花不负韶

文章总结了Vue中图片的file、base64与blob的相互转换方法,包括file转base64、base64转file、base64转blob、blob转base64、file转blob以及blob转file,个人经验分享,希望对大家有所帮助

vue图片file、base64与blob相互转换

file转base64

fileToBase64 (file) {
  return new Promise((resolve, reject) => {
    // 创建一个新的 FileReader 对象
    const reader = new FileReader();
    // 读取 File 对象
    reader.readAsDataURL(file);
    // 加载完成后
    reader.onload = function () {
      // 将读取的数据转换为 base64 编码的字符串
      const base64String = reader.result.split(",")[1];
      // 解析为 Promise 对象,并返回 base64 编码的字符串
      resolve('data:image/jpeg;base64,' + base64String);
    };
    // 加载失败时
    reader.onerror = function () {
      reject(new Error("Failed to load file"));
    };
  })
}

base64转file

base64ToFile(base64Data) {
  // 分割base64
  const arr = base64Data.split(','); 
  // 获取类型
  const mime = arr[0].match(/:(.*?);/)[1];
  // 解析base字符串
  const bstr = window.atob(arr[1]); 
  const n = bstr.length; 
  // base64文件数据读取
  const u8arr = new Uint8Array(n);
  for (let i = 0; i < n; i += 1) {
    u8arr[i] = bstr.charCodeAt(i);
  }
  return new File([u8arr], '', { type: mime });
}

base64转blob

base64ToBlob(base64Data) {
  // 分割base64
  const temp = base64Data.split(','); 
  // 获取类型
  const mime = temp[0].match(/:(.*?);/)[1];
  // 解码使用 base-64 编码的字符串
  const raw = window.atob(temp[1]);
  const rawLength = raw.length;
  // base64文件数据读取
  const uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; i += 1) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {type: mime})
}

blob转base64

blobToBase64 (blob) {
  return new Promise((resolve,reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = () => {
      const base64 = reader.result;
      resolve(base64);
    }
    reader.onerror = function () {
      reject(new Error("Failed to load file"));
    };
  })
}

file转blob

const blob = URL.createObjectURL(file)

blob转file

const file = new File([blob], fileName, { type: fileType, lastModified: Date.now() });

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文