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

更新時間：2023年02月02日 16:06:22 作者：Bruce小鬼

本文主要介紹了vue封裝el-upload批量上傳只請求一次接口，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1.概述

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

2.封裝el-upload組件實現(xiàn)批量上傳

1.引入上傳組件

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

el-upload組件封裝參數(shù)介紹

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數(shù)組中
? ? uploadFile(raw) {
? ? ? this.files.push(raw.file)
? ? },
? ? // 請求后端上傳接口上傳文件
? ? async submitUpload() {
? ? ? ? // el-upload原始上傳方法
? ? ? this.$refs.upload.submit()

? ? ? // 創(chuàng)建FormData對象，通過該對象實現(xiàn)批量文件上傳
? ? ? let fd = new FormData()
? ? ? // 因為要上傳多個文件，所以需要遍歷一下才行,不要直接使用我們的文件數(shù)組進行上傳，你會發(fā)現(xiàn)傳給后臺的是兩個Object
? ? ? this.files.forEach(function (file) {
? ? ? ? ? // 遍歷files數(shù)組，將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是封裝好的，下面是請求上傳接口參數(shù)。

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上傳請求接口內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: