vue截图转base64转文件File异步获取方式

import html2canvas from "html2canvas";
export   function  base64ImgtoFile(dataurl, filename = 'file') {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let suffix = mime.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, {
      type: mime
    })
  }
 
 
  export   function toImages(imageTofile) {
    return new Promise((resolve, reject) => {
      html2canvas(imageTofile, {
        backgroundColor: null,
        useCORS: true 
      }).then((canvas) => {
        const url = canvas.toDataURL('image/png');
          resolve(base64ImgtoFile(url))
      }).catch((err) => {
        reject(err)
      })
    })
  }
 

// 调用  

  toImage() {
      let that=this;

       toImages(this.$refs.imageTofile).then((imgFileRaw) => {
      that.imgFileRaw = base64ImgtoFile(this.htmlUrl);

    }).catch((error) => {
      that.imgFileRaw = null;

    });

    },

             // 组件dom结构，on-change钩子函数绑定
                    <el-upload
                    class="upload-demo"
                    drag
                    :show-file-list="false"
                    :auto-upload="false"
                    action="https://jsonplaceholder.typicode.com/posts/"            
                    :on-change="previewImage"
                    multiple>
                    <div v-if="!loading" class="el-upload__text" style="font-size: 16px;color: #68718C;">将图片拖到此处，或<em>点击上传</em>或拍照</div>
                </el-upload>

            var URL = null
            if (window.createObjectURL !== undefined) {
                URL = window.createObjectURL(file.raw)
            } else if (window.URL !== undefined) {
                URL = window.URL.createObjectURL(file.raw)
            } else if (window.webkitURL !== undefined) {
                URL = window.webkitURL.createObjectURL(file.raw)
            }
            this.option.img = URL
//option为组件vue-cropper中绑定的data值，img获得转化后的base64格式的URL就可以在cro-pperjs中进行展示

        clip(){//对图片进行裁剪
            this.$refs.cropper.getCropData((data) => {
                this.localUrl = data //img的src属性指定locaUrl就可以实现预览
                console.log(data,'裁剪之后的图片地址')
                sessionStorage.setItem('imageToBase64',this.localUrl)
                // this.subFileList = this.dataURLtoFile(this.localUrl, this.file.name)
            })             
        },

        // base64转file，dataurl为base64地址，filename为文件名称，自定义即可
        dataURLtoFile(dataurl, filename) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length; 
            let u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime}, {uid: 1111111111111});
        },