elementui上传图片回显功能实现

<el-upload
  class="avatar-uploader"
    ref="otherLicense"
    action
    :auto-upload="false"
    :on-preview="handlePicPreview"
    :on-remove="handleRemove"
    :file-list="form.fileList"
    :limit="imgLimit"
    :on-change="otherSectionFile"
    list-type="picture-card"
    multiple
  >
  <i class="el-icon-plus"></i>
</el-upload>
<!-- 上传图片放大 -->
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

// 业务结束证明材料
 let validateImage = (rule, value, callback) => {
    // console.log(this.AddDateModel.fileId);
    //验证器
    if (this.AddDateModel.fileId.length <= 0) {
      //为true代表图片在  false报错
      callback(new Error("请上传业务结束证明材料"));
    } else {
      callback();
    }
  };
AddDateModel: {
 fileId:[]
},
// 回显图片的路径
photoList: [{ url: "" }],
// 放大图片的路径
dialogImageUrl: "",
// 上传图片放大弹出框
dialogVisible: false,
imgLimit: 9, //最多可上传几张图片
AddDateRules: {
 fileId: [
    { required: true, validator: validateImage, trigger: "blur" },
  ],
},

 handlePicPreview(file) {
  this.dialogImageUrl = file.url;
   this.dialogVisible = true;
 },
 // 业务申请材料
 handleRemove(file, fileList) {
   this.AddDateModel.fileId.map((item, index) => {
     if (item.uid == file.uid) {
       this.AddDateModel.fileId.splice(index, 1);
     }
   });
 },
 otherSectionFile(file) {
   const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
   const isJPG = typeArr.indexOf(file.raw.type) !== -1;
   const isLt20M = file.size / 1024 / 1024 < 20;
   if (!isJPG) {
     this.$message.error("只能是图片!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   if (!isLt20M) {
     this.$message.error("上传图片大小不能超过 20MB!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   this.otherFiles = file.raw;
   // FormData 对象
   var formData = new FormData();
   // 文件对象
   formData.append("file", this.otherFiles);
   formData.append("filePath", "yuanchengyiliao");
   let config = {
     headers: {
       "Content-Type": "multipart/form-data",
     },
     methods: "post",
   };
   // 调取接口  上传参数
   this.$axios.hosUpload(formData, config).then((res) => {
     // console.log(file)
     let result = res.data.data;
     let arr = [];
     for (let i = 0; i < result.length; i++) {
       // console.log(result[i])
       arr.push(result[i].pictureId);
     }
     file.pictureId = arr.join("||");
     this.AddDateModel.fileId.push(file);
     // console.log(this.AddDateModel.fileId);
   });
 },

async bussEdit(row) {
 //调取接口然后把数据传到photoList中，我只上传一张图片，就直接写，上传多张的，循环就好了。
 this.photoList[0].url = 图片路径;
},
// 回显
fileCoList: [], //图片回显
if (row.fileId) {
 // console.log(row.fileId)
  let imgss = [];
  let imgLen = row.fileId.split(",");
  for (let i = 0; i < imgLen.length; i++) {
    imgss.push(imgLen[i]);
  }
  // console.log(imgss.join(','))
this.$nextTick(() => {
  this.$refs.addinmanfill.getFile(imgss.join(","));
});
} else {
    this.$nextTick(() => {
  this.$refs.addinmanfill.getFile('');
  });
}
watch: {
fileCoList: {
    deep: true,
    handler() {
      if (this.fileCoList) {
        this.AddDateModel.fileId = this.fileCoList;
      }
    },
  },
},
async getFile(ids) {
let idsdata = _qs.stringify({
  ids: ids,
});
let res = await this.$axios.sysgetFile(idsdata);
//   console.log(res.data.data);
let result = res.data.data;
result.map((item) => {
  // console.log(item)
  item.url = this.GLOBAL.BASE_URL + item.url;
  item.pictureId = item.id;
});
// console.log(result)
this.fileCoList = result;
},