前端反显后端图片、上传预览图片

 一、下载反显图片

1、将文件下载为blob格式文件。

2、将后端返回的文件转为base64，然后将解析完的数据赋值到图片组件上。 

将后端返回的数据解拿出，调用转换base64 方法：

          downloadFile(_this.userInfo.imgUrl).then(res => {
            res = res.data
            base64(res).then(res => {
              _this.imaUrlData = res
            })
          }).catch(err => {
            message({
              message: err,
              type: "error",
            });
          })

解析为base64编码 

export const base64 = (stream) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      resolve(e.target.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(stream);
  });
}

imaUrlData赋值到图片组件上：

        <el-col :span="3">
          <el-avatar
            class="head_portrait"
            shape="circle"
            @error='true'
            :size="110"
            :src="imaUrlData">
          </el-avatar>

 二、编辑时预览：

1、判断文件类型、然后将文件解析为Base64、上传成功后替换显示数据（使用两个formDate对象哦，一个用于显示，一个用于表单修改）。

    onFileChange(e) {
      let file = e.target.files[0];
      if (null == file) {
        message({
          message: '选择在的文件为空！',
          type: "error",
        })
        this.$refs.fileFile.value = null
      } else {
        let arr = ['jpeg', 'png', 'jpg']
        if (!arr.includes(file.type.split('/')[1])) {
          message({
            message: '上传文件格式不正确！',
            type: "error",
          })
          this.$refs.fileFile.value = null
        } else {
          let reader = new FileReader();
          reader.onload = (event) => {
            this.fromData.imaUrlData = event.target.result;
            let formData = new FormData()
            formData.append('file', file)
            this.uploadImage(formData);
          };
          reader.readAsDataURL(file);
        }
      }
    }

    uploadImage(base64Image) {
      // 发送Base64图像到后端
      uploadFile(base64Image).then(res => {
        this.fromData.imgUrl = res.data.msg
        // console.log('上传文件1',res)
      }).catch(err => {
        message({
          message: '上传失败',
          type: "error",
        });
        console.log('上传文件出错', err)
      })
    }