element-ui upload 照片墙 照片回显

        
          
            
          
          
            
          
        

   data() {
    return {
      fileList: [],
      items: [],
      urlObj: {},
      dialogImageUrl: "",
      invitationFirst: "",
      urlArr: [],
     }
  }

  methods: {
    getList() {//这个函数可以不用看 这是获取后台完整的数据
      this.listLoading = true;
      this.listQuery.isAsc = false;
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records;
        this.list.map(val => {
          //仅展示第一张海报 后台传回以；分割图片网址的字符串，这里开始分割
          if (val.invitationPosterUrl != null) {
            const invitationurlArr = val.invitationPosterUrl.split(";");
            this.urlArr = invitationurlArr;
            const invitationurl = invitationurlArr[0];
            val.invitationFirst = invitationurl;
          }
        });
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    //编辑
    handleUpdate(row) {
      this.fileList = [];
      this.urlArr = [];
      getObj(row.id).then(response => {
        this.form = response.data.data;
        if (
          this.form.invitationPosterUrl != "" &&
          this.form.invitationPosterUrl != null
        ) {
          //分割网址插入this.fileList图片就可以展示出来了
          this.items = this.form.invitationPosterUrl.split(";");
          this.items.forEach(val => {
            this.urlObj.url = val;
            this.urlArr.push(val)
            this.fileList.push(this.urlObj);
            this.urlObj = {};
          });
        }
        this.dialogFormVisible = true;
        this.dialogStatus = "update";
      });
    },    
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          putObj(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    handleSuccess(jsonData, field) {//上传图片成功传给后台的数据
      this.urlArr.push(jsonData.filename);
      this.urlString = this.urlArr.join(";");
      this.form.invitationPosterUrl = this.urlString;
    },
    handleRemove(file, fileList) {//移除图片传给后台的数据
      this.urlArr = [];
      if (fileList.length == 0) {
        this.form.invitationPosterUrl = null;
      } else {
        fileList.forEach(item => {
          this.urlArr.push(item.url);
          this.urlString = this.urlArr.join(";");
          this.form.invitationPosterUrl = this.urlString;
        });
      }
    },
    handlePictureCardPreview(file) {//点击放大图片
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }