使用iview Upload进行多文件上传，编辑页初始已上传的图片失败的问题

2021-03-21 16:25

阅读：658

标签：尺寸 baseurl this join oda nis hover img 网络

以下是组件代码，重点部分在watch中，

　　 name: file.name,

　　 url: file.url,

　　 showProgress: false,

　　status: "finished",

});


      } else {
        this.$Message.info(res.message);
      }
    },
    uploadError() {
      this.$Modal.error({
        title: "操作失败",
        content: "网络请求失败",
        onOk() {},
      });
    },
    handleFormatError(file) {
      this.$Modal.warning({
        title: "格式错误",
        content:
          "文件 " +
          file.name +
          " 格式不正确，只支持" +
          this.fileType +
          "格式的文件。",
        onOk() {
          this.$nextTick(() => {});
        },
      });
    },
    handleMaxSize(file) {
      this.$Modal.warning({
        title: "文件过大",
        content: "文件 " + file.name + " 太大，不能超过" + this.fileSize + "。",
        onOk() {},
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length this.mutileUploadData.maxNum;
      if (!check) {
        this.$Notice.warning({
          title: "最多上传" + this.mutileUploadData.maxNum + "张",
        });
      }
      return check;
    },
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  },
  watch: {
    uploadList: {
      handler(val) {
        let tempList = [];
        val.forEach((element) => {
          tempList.push(element.url);
        });
        this.$emit("get-upload-Image", tempList);
      },
      deep: true,
    },
    "mutileUploadData.defaultList": {
      handler(val) {
        this.uploadList.splice(0, this.uploadList.length); //清空数组
        val.forEach((element) => {
          this.uploadList.push({
            name: element.name,
            url: element.url,
            showProgress: false,
            status: "finished",
          });
        });
      },
      deep: true,
    }
  },
};