? 作為前端小白剛剛接觸上傳、下載文件的操作也讓我很頭疼，所以利用時間記錄一下方便鞏固，希望能夠幫到大家。

? 我將情況分為以下幾種：

1.點擊按鈕上傳單個文件

//html
<a-upload
                :action="baseUrl + '/api/uploadSingleFile'" 
                :headers="headers"
                :file-list="fileList"
                @change="handleChange_file">
                <a-button>
                  <a-icon type="upload" /> 上傳文件
                </a-button>
</a-upload>
//action表示上傳的地址，baseUrl是我們公司服務(wù)器的IP地址，加上后面的接口地址就組成了完整的上傳地址
//headers表示設(shè)置上傳的請求頭部，因為是后臺管理系統(tǒng)所以會在里面存放必要的token
//file-list 就是我們上傳文件的數(shù)組，一個文件就是一個數(shù)組元素
//@change就是提交文件的回調(diào)


//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];
      //這一行用來決定上傳文件的限制個數(shù)，-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]; //重點
    },

2.點擊按鈕上傳多個文件

上面就說過了，把中的數(shù)字換一下就行了。

3.上傳單個按鈕但是不想顯示文件列表

?

antd會像這樣上傳成功后自動生成列表，但是有時候我們不需要，我們在a-upload下填入

:showUploadList="false"? 屬性就可以了

4.下載文件（單個）

一般通過動態(tài)創(chuàng)建a標(biāo)簽，給url的地址改為文件下載地址就可以了

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

5.下載文件（多個）

一般是通過upload組件把文件列表展示出來，這樣一點擊就可以下載了

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,
        });
      });
    },
//這里調(diào)用的是a-modal的回調(diào)讓modal懸浮框顯示出來同時，在文件列表中放入我們需要的文件。
//一定要嚴(yán)格按照 url + status + name + uid 的格式。

? 之后遇到新問題我會再次追加，歡迎大家討論。文章來源地址http://www.zghlxwxcb.cn/news/detail-435750.html

到了這里，關(guān)于antd的upload組件的各種上傳、下載操作(vue)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！