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

 更新时间:2025年12月17日 14:17:37   作者:梨花不负韶  
文章总结了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() });

总结

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

相关文章

  • Vue对象的组成和挂载方式详解

    Vue对象的组成和挂载方式详解

    这篇文章主要介绍了Vue对象的基本组成和Vue对象挂载的几种方式,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • Vue开发Sort组件代码详解

    Vue开发Sort组件代码详解

    这篇文章主要介绍了Vue开发Sort组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • vue+freemarker中遇到的坑及解决

    vue+freemarker中遇到的坑及解决

    这篇文章主要介绍了vue+freemarker中遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中复用vuex.store对象的定义

    vue中复用vuex.store对象的定义

    这篇文章主要介绍了vue中复用vuex.store对象的定义,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)

    使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)

    最近接到一个需求是做一个中国地图,下面这篇文章主要给大家介绍了关于如何使用Vue3和Echarts 5绘制带有立体感流线中国地图的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • Vue.js实现文件上传压缩优化处理技巧

    Vue.js实现文件上传压缩优化处理技巧

    这篇文章主要介绍了Vue.js实现文件上传压缩优化处理,本文给大家介绍两种方法一种是借助canvas的封装的文件压缩上传,二是使用compressorjs第三方插件实现,本文给大家介绍的非常详细需要的朋友可以参考下
    2022-11-11
  • 前端架构vue架构插槽slot使用教程

    前端架构vue架构插槽slot使用教程

    这篇文章主要为大家介绍了前端vue架构插槽slot使用教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02
  • vue3如何在setup中获取DOM元素

    vue3如何在setup中获取DOM元素

    这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3路由的props案例详解

    Vue3路由的props案例详解

    Vue3路由的props作用是将路由参数或自定义数据传递给路由组件作为props,布尔值传递params参数,对象传递自定义数据,函数可以进行参数类型转换和拼接自定义数据,通过案例,展示了如何配置路由并使用props传递数据,感兴趣的朋友跟随小编一起看看吧
    2025-12-12
  • element日期组件实现只能选择小时或分钟

    element日期组件实现只能选择小时或分钟

    本文主要介绍了element日期组件实现只能选择小时或分钟,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01

最新评论