木灵鱼儿

木灵鱼儿

阅读:196

最后更新:2021/07/02/ 11:03:18

base64转file文件方法

使用canvas操作内容后,如果想保存图片之类的操作,就无可避免的要处理这一步,因为canvas导出的是base64格式的文件,如果你只做预览还好,存储的话,就要想办法了。

我的想法是转成上传文件的那种file格式。

方法如下:

/**
 * @description: 将base64转换为文件对象
 * @param {*} dataUrl base64
 * @param {*} fileName 文件名
 * @Date: 2021-06-30 14:33:47
 * @Author: mulingyuer
 */
export function dataURLtoFile(dataUrl, fileName) {
  const arr = dataUrl.split(";base64,"); //[data:image/png,xxx]
  const mime = arr[0].replace("data:", ""); //mime后端识别用的文件格式数据
  const fileType = mime.split("/").pop(); //获取文件格式
  const bstr = atob(arr[1]); //base64解码
  //创建Unicode编码的数组对象,每个值都是Unicode
  const u8arr = new Uint8Array(bstr.split("").map(str => str.charCodeAt(0)));
  return new File([u8arr], `${fileName ?? "file"}.${fileType}`, { type: mime });
}

步骤:

  1. 截取base64文本,已";base64,"为分割,可以拿到[data:image/png,xxx]内容数据,下标0可以获取到文件mime信息,下标1则是base64内容
  2. 通过下标0获取到mime
  3. 通过mime获取到文件格式(文件名要用)
  4. 通过window下的atob方法对base64解码
  5. 创建一个Uint8Array数组,内容是解码出来后每一个字符的Unicode编码
  6. 创建File文件,第一个是数组,传入Uint8Array,第二个是文件名,第三个是配置信息,其中type设置mime信息。

除了new File你也可以创建blob 对象

把new File替换一下

new Blob([u8arr],{ type: mime });

完成。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 196

相关文章

目录树