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

<template>
  <el-dialog
    title="uploadFile"
    :visible.sync="dialogVisible"
    width="60%"
    :append-to-body="true"
    :modal-append-to-body="false"
    :before-close="closeDialog"
  >
    <div class="upload-file-box">
      <el-upload
        :action="fileUrl"
        :headers="headers"
        :before-upload="beforeUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-remove="beforeRemove"
        multiple
        :limit="5"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary" icon="el-icon-plus"
          >上传文件</el-button
        >
        <!-- <div slot="tip" class="el-upload__tip">可上传图片、Excel、Word、pdf格式文件</div> -->
      </el-upload>
    </div>

    <!-- 附件预览的弹窗 -->
    <div>
      <el-dialog
        title="附件预览"
        :visible.sync="dialogVisible1"
        width="70%"
        :before-close="closeDialog1"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <iframe style="width: 100%;height: 600px" :src="pathFile"></iframe>
        <div slot="footer" class="dialog-footer">
          <el-button
            class="filter_button"
            type="primary"
            @click="dialogVisible1 = false"
            >关 闭</el-button
          >
        </div>
      </el-dialog>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关 闭</el-button>
    </span>
  </el-dialog>
</template>


<style lang="scss" scoped>
.upload-file-box {
  height: 380px;
  overflow: auto;
}
</style>

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} 个文件`
      );
    }
  }

图片预览效果

附件预览效果