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 });

完成。