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 });
}
步骤:
- 截取base64文本,已";base64,"为分割,可以拿到
[data:image/png,xxx]
内容数据,下标0可以获取到文件mime信息,下标1则是base64内容 - 通过下标0获取到mime
- 通过mime获取到文件格式(文件名要用)
- 通过window下的atob方法对base64解码
- 创建一个Uint8Array数组,内容是解码出来后每一个字符的Unicode编码
- 创建File文件,第一个是数组,传入Uint8Array,第二个是文件名,第三个是配置信息,其中type设置mime信息。
除了new File你也可以创建blob
对象
把new File替换一下
new Blob([u8arr],{ type: mime });
完成。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据