Base64/Blob/File 图片文件转换

function TranFile (from, to, data, filename) {
  return new Promise((resolve) => {
    if (from == 'BASE64') {
      let arr = data.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);
      }
      if (to == 'BLOB') {
        resolve({ data: new Blob([u8arr], { type: mime }) });
      } else if (to == 'FILE') {
        console.log('this is never use, func this name');
        resolve({ data: new File([u8arr], '', { type: mime }) });
      }
    } else if (from == 'FILE') {
      if (to == 'BASE64') {
        let reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onload = function (e) {
          resolve({ data: e.target.result });
        }
      } else if (to == 'BLOB') {
        resolve({ data: new Blob([data], { type: data.type }) });
      }
    } else if (from == 'BLOB') {
      if (to == 'BASE64') {
        let reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onload = function (e) {
          resolve({ data: e.target.result });
        }
      } else if (to == 'FILE') {
        if (!filename) {
          let suffix = data.type.split('/')[1];
          filename = 'newfile.' + suffix;
        }
        resolve({ data: new File([data], filename, { type: data.type }) });
      }
    }
  });
}

methods:{
    isIE() { // ie?
            if (!!window.ActiveXObject || "ActiveXObject" in window)
                return true;
            else
                return false;
        },
        //element upload的on-change事件
        imp(file) { //file是element-ui的upload组件的file格式文件
            if (this.isIE()) {
            //是ie的话就转成blob格式(因为ie好像不支持 new FileReader()方法，所以不能转成base64)
                TranFile("FILE", "BLOB", file.raw, "filename").then(res => {
                    var imgurl = URL.createObjectURL(res.data);
                    this.option.img = imgurl;
                });
            } else {
            //不是ie就转成base64格式(chrome上blob:xxxx临时地址的方式会报安全策略的错误导致图片不展示)
                TranFile("FILE", "BASE64", file.raw, "filename").then(res => {
                    this.option.img = res.data;
                });
            }

            this.dialogVisible = true;
        },
 }

文章来源