el-upload上传照片转base64给后台

 效果图：

 上传单张照片，这里的dataForm.companyInfo.creditImage为字符串

 <el-upload action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-change="beforeAvatarUpload">
      <img v-if="dataForm.companyInfo.creditImage" :src="dataForm.companyInfo.creditImage" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

    // 转换成base64方法
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    beforeAvatarUpload(file) {
      this.getBase64(file.raw).then(res => {
        this.dataForm.companyInfo.creditImage = res
      })
    },

 转码之后的数据格式：

<style scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
</style>

上传多张照片，这里的this.dataForm.intors为数组

on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]

multiple

是否支持多选文件

boolean

—

—

  <el-col :span="22">
          <el-form-item label="赛事介绍">
            <el-upload multiple action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :file-list="fileList" :on-remove="handleUploadRemove" :on-preview="handlePictureCardPreview" :on-change="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog  append-to-body :visible.sync="dialogVisible">
              <img v-if="dataForm.intors" width="100%" :src="dataForm.intors" alt="">
            </el-dialog>
          </el-form-item>
</el-col>

 dialogVisible: false,
 fileList: [],

回显：

   this.dataForm.intors.forEach(element => {
          let obj = new Object();
          obj.url = element;
          this.fileList.push(obj);
   });

//上传
 handleRemove(file, fileList) {
     var newomtors = []
      for (let item of fileList) {
        this.getBase64(item.raw).then((res) => {
          newomtors.push(res)
          let arrintors = this.fileList.map(item => {
            return item.url;
          });
          //arrintors为旧图片newomtors为新添加的图片合并到一个数组里传给后台
          let all = [...arrintors, ...newomtors]
          this.dataForm.intors = all
        });
      }
},

//预览
 handlePictureCardPreview(file) {
      this.dataForm.intors = file.url;
      this.dialogVisible = true;
},

 // 删除
    handleUploadRemove(file, fileList) {
     const index = this.dataForm.intors.findIndex(item => {return item === file.url})
     this.dataForm.intors.splice(index, 1)
},

补充：保存或者取消的时候页面刷新重新获取图片

//APP.vue页面
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      })
    }
  },
}
</script>

//要刷新的页面
export default {
  inject: ['reload'], //引入
}
//使用
this.reload();