RuoYi-flowable-master/ruoyi-ui/src/views/invest/components/fileItem.vue

<template>
  <div class="uploadWrapper">
    <el-upload
      ref="upload"
      class="upload"
      multiple
      :file-list="fileList"
      :action="uploadFileUrl"
      :headers="headers"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  listFileBusinessId,
  delFile,
  downloadFileById,
} from "@/api/system/file";
export default {
  props: {},
  data() {
    return {
      fileList: [],
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    };
  },
  mounted() {
    if (this.id) {
      this.getListFileBusinessId(this.id);
    }
  },
  methods: {
    // 根据附件业务ID()获取附件详情信息列表
    getListFileBusinessId(id) {
      if (id) {
        listFileBusinessId(id).then((response) => {
          if (response.data.length > 0) {
            let list = response.data;
            for (let i in list) {
              list[i].name = list[i].newUploadName;
            }
            this.fileList = list;
            this.$emit("getFileList", this.fileList);
          }
        });
      }
    },
    handleChange(file, fileList) {
      //   console.log("----", file, fileList);
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      if (file.id) {
        const id = file.id;
        delFile(id).then((response) => {
          // 给父组件传值
          this.$emit("getFileList", this.fileList);
        });
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUploadSuccess(res, file, fileList) {
      let that = this;
      if (fileList.every((item) => item.status == "success")) {
        fileList.map((item) => {
          if (item.response) {
            item.response.file.name = item.response.file.newUploadName;
            this.fileList.push(item.response.file);
            that.$emit("getFileList", this.fileList);
          }
        });
      }
    },
    //点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      downloadFileById(file.id).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", file.newUploadName);
        document.body.appendChild(link);
        link.click();
      });
    },
  },
};
</script>
<style lang="scss">
.uploadWrapper ::v-deep .el-upload-list__item {
  transition: none !important;
}
</style>