Vue2+element文件上传预览的功能实现

data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      fileUrl: "文件上传的接口",
      headers: { '自定义名称': "请求头" }, // 例如: headers: { Authorization: "adsda" },
      pathFile: "",
      fileUrlLoad: "文件回显的接口",
      fileList: [],
      formData: {
        enclosureFiles: []
      }
    };
  },

  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    closeDialog1() {
      this.dialogVisible1 = false;
    },

    /* 文件上传 */
    beforeUpload(file) {},
    handlePreview(file) {
      console.log(file);
      this.dialogVisible1 = true;
      if (file.url) {
        this.pathFile = this.fileUrlLoad + file.url;
      }
      if (file.path) {
        this.pathFile = this.fileUrlLoad + file.path;
      } else {
        this.pathFile = this.fileUrlLoad + file.response.data.path;
      }
    }, // 关键是这一步，把回显的地址给pathFile不同的后端返回的也不同，需自行修改
    handleRemove(file, fileList) {
      const that = this;
      this.formData.enclosureFiles.forEach((item, index) => {
        if (file.response) {
          if (item.id === file.response.data.id) {
            this.formData.enclosureFiles.splice(index, 1);
          }
        } else {
          if (item.id === file.id) {
            this.formData.enclosureFiles.splice(index, 1);
          }
        }
      });
    },
    handleSuccess(response, file, fileList) {
      // console.log(response);
      this.formData.enclosureFiles.push({
        uid: file.uid,
        id: response.data.id
      });
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    }
  }

图片预览效果

附件预览效果