图片base64格式转文件

一、 图片转base64

1. FileReader方式，图片加载完成触发onload

let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
     // base64编码,e.target.result
    };

2. canvas方式，HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI。可以使用 type 参数指定其类型，默认为 PNG 格式。图片的分辨率为 96dpi。（参考：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL）

//用于创建一个新的 HTMLImageElement 实例，等价于document.createElement('img')。
    let img =new Image();
    //图片url
    img.src="img_url";
    //图片加载完成
    img.onload=function(){
        //绘制canvas
        let canvas=document.createElement("canvas");
        canvas.width=img.width;
        canvas.height=img.height;
        let context=canvas.getContext("2d");
        context.drawImage(img,0,0,img.width,img.height);
        //将canvas内容转换成base64编码
        let base64=canvas.toDataURL("image/png");
    }

二、<img src="" /> 可以显示base64编码的图片；为了在<van-uploader>组件中显示图片，需要将base64编码转换成文件

三、base64转文件

1. new File() 方法，可能存在ios系统不兼容问题

//let dataurl="base64编码",filename="文件名称";
base64ImgtoFile(dataurl,filename){
 const arr = dataurl.split(",");
    const mime = arr[0].match(/:(.*?);/)[1];
    const suffix = mime.split("/")[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
    });
}

2. base64转blob，blob转文件

//let dataurl="base64编码",filename="文件名称";
base64ImgtoFile(dataurl,filename){
 var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        //8 位无符号整型数组
        u8arr = new Uint8Array(n);
    while (n--) {
        //返回字符串中规定索引（下标）处字符的 Unicode
        u8arr[n] = bstr.charCodeAt(n);
    }
    //转bolb
    let blob = new Blob([u8arr], { type: mime });
    //将blob转file
    //当前文件最后修改日期
    blob.lastModifiedDate = new Date();
    blob.name = filename;
    return blob;
}

最后处理van-uploader 赋值

<van-uploader preview-size="60"  v-model="fileList" reupload max-count="1" :deletable="false" />

//转换好的file
 let file= base64ImgtoFile(dataurl);
let url =  window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file);
fileList.splice(0, 1, {
        content:dataurl ,//base64编码
        File: file,//转换好的file
        isImage: true,
        url,
    });