【ant，前端】上传附件，下载附件，删除附件

<template>
  <div>
    <a-upload
      accept=".doc, .docx, .pdf"
      :multiple="true"
      v-model:loadList="loadList"
      :show-upload-list="false"
      :custom-request="uploadContractFile"
    >
      <a-button type="primary">
        <template #icon><cloud-upload-outlined /></template><span>上传附件</span>
      </a-button>
      <span style="margin-left: 20px">请上传".doc, .docx, .pdf"的文件</span>
    </a-upload>
    <div style="display: flex;justify-content: start;margin-top: 10px;" v-show="loadList.length" v-for="(item, index) in loadList" :key="item.id">
      <div>{{item.name}}</div>
      <a href="#" @click="downloadFile(item)"  style="margin:0px 20px"><a-spin size="small" :spinning="loading"/>下载</a>
      <a-popconfirm title="确定要删除吗？" @confirm="delloadFile(index)">
        <a href="#">删除</a>
      </a-popconfirm>
    </div>
  </div>
</template>

<script>
//引入封装好的接口
import {ApplyApi} from "@/api/workflow/applyApi";

export default {
  name: 'uploadFile',
  props:{},
  data() {
    return {
      loading: false,
      loadList: []
    };
  },
  methods: {
    //上传附件
    async uploadContractFile(data) {
      let formData = new FormData();
      formData.append("file", data.file);
      formData.append("contractAttType", this.contractAttType);
      // 调后端接口
      await ApplyApi.getUpload(formData).then(res => {
        this.loadList.push(res.data);
      });
    },
    // 下载附件
    downloadFile(value) {
      this.loading=true;
      // 调后端接口
      ApplyApi.download(value).then(res => {
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href =  window.URL.createObjectURL(new Blob([res.data]));
        link.setAttribute('download',
          decodeURIComponent(JSON.parse(res.headers['content-disposition'].split(";")[1].split("=")[1])));
        document.body.appendChild(link);
        link.click()
        this.loading=false
        this.$message.success("文件下载成功");
      }).catch(err=>{
        console.log(err)
        this.$message.error("文件下载失败");
        this.loading=false
      })
      ;
    },
    // 删除附件
    delloadFile(index) {
      this.loadList.splice(index, 1);
      this.$message.success("删除成功");
      this.$emit('change');
    },
  }
};
</script>

<style scoped>
</style>