vue 图片file转Base64编码格式（以及base64转图片文件）

一、1.图片file转Base64编码格式

imageToBase64 (file) {
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        console.log('file 转 base64结果：' + reader.result)
        this.iconBase64 = reader.result
      }
      reader.onerror = function (error) {
        console.log('Error: ', error)
      }
}

2.Base64图像直接显示在标签

<el-form-item prop="iconBase64">
   <img :src="iconBase64" v-show="isShow" />
</el-form-item>

二、base64转图片文件

 // base64转图片资源

    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,

      });

    },