vue封裝el-upload批量上傳隻請求一次接口

Posted on by

1.概述

el-upload組件默認批量上傳邏輯是可以批量選擇文件，點擊上傳時候是每個文件調用一次接口，請求接口時不是批量傳遞文件。這樣會造成上傳接口頻繁調用，壓力增大，不利於接口的穩定性。
因此我們需要對el-upload組件進行封裝，實現批量文件上傳隻調用一次接口。

2.封裝el-upload組件實現批量上傳

1.引入上傳組件

在vue的template標簽中引入el-upload組件，引入代碼和屬性說明如下。

el-upload組件封裝參數介紹

  • multiple：默認true，批量選擇屬性。
  • action： 上傳接口地址，這裡我們使用自定義方式上傳，因此這個值為空。
  • show-file-list： 是否顯示選擇文件的列表
  • auto-upload： 選擇文件後是否自動上傳，這裡必須設置為不自動上傳，使用我們封裝的方法上傳
  • http-request：覆蓋action默認的上傳行為，使用自定義方式上傳。
<el-upload ref="upload" multiple action="" :show-file-list="false" :auto-upload="false" :http-request="uploadFile">
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
    <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
    <div slot="tip" class="el-upload__tip">隻能上傳jpg/png文件，且不超過5G</div>
</el-upload>

2.封裝自定義上傳方法

上面我們引入el-upload組件時，使用http-request屬性覆蓋瞭默認的上傳行為，使用自定義的上傳行為，下面就來封裝自定義的上傳方法。
在vue頁面的

<script>
export default {
  data() {
    return {
      // 上傳的多個文件
      files: [],
    }
  },
   methods: {
    // 將選擇的批量文件添加到files數組中
    uploadFile(raw) {
      this.files.push(raw.file)
    },
    // 請求後端上傳接口上傳文件
    async submitUpload() {
        // el-upload原始上傳方法
      this.$refs.upload.submit()

      // 創建FormData對象，通過該對象實現批量文件上傳
      let fd = new FormData()
      // 因為要上傳多個文件，所以需要遍歷一下才行,不要直接使用我們的文件數組進行上傳，你會發現傳給後臺的是兩個Object
      this.files.forEach(function (file) {
          // 遍歷files數組，將file添加到FormData對象中
        fd.append("file", file, file.name)
      })
      // 請求後端接口
      nanoApi
        .uploadFile(fd)
        .then((res) => {
          console.log("上傳文件", res)
        })
        .catch((error) => {
          console.log("上傳失敗" + error)
        })
    },
  }
}
</script>

3.axios封裝

axios是封裝好的，下面是請求上傳接口參數。

uploadFile(data) {
    return request({
      url: `/api/v1/upload`,
      method: "post",
      //Content-Type請求類型必須設置為multipart/form-data
      headers: {
        "Content-Type": "multipart/form-data",
      },
      // 上傳文件
      data,
    })
  },

到此這篇關於vue封裝el-upload批量上傳隻請求一次接口的文章就介紹到這瞭,更多相關vue el-upload上傳請求接口內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：