antd的upload组件的各种上传、下载操作(vue)

//html

                
                   上传文件
                

//action表示上传的地址，baseUrl是我们公司服务器的IP地址，加上后面的接口地址就组成了完整的上传地址
//headers表示设置上传的请求头部，因为是后台管理系统所以会在里面存放必要的token
//file-list 就是我们上传文件的数组，一个文件就是一个数组元素
//@change就是提交文件的回调
 
 
//data
{
  baseUrl: baseUrl,
  headers: { accesstoken: sessionStorage.getItem("accessToken") },
  fileList:[],
  fileList2:[]
}
//这里除了fileList要需要fileList2的原因是：如果上传按钮下需要展示文件列表就必须是
{
   url: res,
   status: "done",
   name: res,
   uid: index + 1,
}
的对象形式，我们用fileList2来存储文件的下载链接也就是fileList中url的res
 
//methods
    handleChange_file(info) {
      let fileList = [...info.fileList];
      //这一行用来决定上传文件的限制个数，-1就表示1个，-2就是2个依次类推...
      fileList = fileList.slice(-1);
      //这里判断文件是否上传成功
      if (info.file.status === "done") {
        //判断是否正确链接上传地址
        if (info.file.response.code == 0) {
          let arr = fileList;
          this.fileList2 = [];
          //上传成功会把接口返回的下载链接存入fileList2
          arr.forEach((item) => {
            if (item.url) {
            this.fileList2.push(item.url);
          } else if (item.response) {
            this.fileList2.push(item.response.data);
          }
          });
          this.$message.success(`${info.file.name} 上传成功!`);
        }
        //如果是移除文件也会重新填入fileList2
      } else if (info.file.status === "removed") {
        let arr = fileList;
        this.fileList2 = [];
        arr.forEach((item) => {
           if (item.url) {
            this.fileList2.push(item.url);
          } else if (item.response) {
            this.fileList2.push(item.response.data);
          }
        });
      }
      this.fileList = [...fileList]; //重点
    },

const a = document.createElement("a");
          a.href = record.filePath;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);

clickModel(record) {
      this.visible = true;
      this.fileList = [];
      let arr = record.filePath;
      arr.forEach((res, index) => {
        this.fileList.push({
          url: res,
          status: "done",
          name: res,
          uid: index + 1,
        });
      });
    },
//这里调用的是a-modal的回调让modal悬浮框显示出来同时，在文件列表中放入我们需要的文件。
//一定要严格按照 url + status + name + uid 的格式。