快捷導(dǎo)航

vue封裝el-upload批量上傳只請(qǐng)求一次接口

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

本文主要介紹了vue封裝el-upload批量上傳只請(qǐng)求一次接口，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1.概述

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

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

1.引入上傳組件

在vue的template標(biāo)簽中引入el-upload組件，引入代碼和屬性說(shuō)明如下。

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

multiple：默認(rèn)true，批量選擇屬性。
action：上傳接口地址，這里我們使用自定義方式上傳，因此這個(gè)值為空。
show-file-list：是否顯示選擇文件的列表
auto-upload：選擇文件后是否自動(dòng)上傳，這里必須設(shè)置為不自動(dòng)上傳，使用我們封裝的方法上傳
http-request：覆蓋action默認(rèn)的上傳行為，使用自定義方式上傳。

<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">上傳到服務(wù)器</el-button>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)5G</div>
</el-upload>

2.封裝自定義上傳方法

上面我們引入el-upload組件時(shí)，使用http-request屬性覆蓋了默認(rèn)的上傳行為，使用自定義的上傳行為，下面就來(lái)封裝自定義的上傳方法。
在vue頁(yè)面的

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

? ? ? // 創(chuàng)建FormData對(duì)象，通過(guò)該對(duì)象實(shí)現(xiàn)批量文件上傳
? ? ? let fd = new FormData()
? ? ? // 因?yàn)橐蟼鞫鄠€(gè)文件，所以需要遍歷一下才行,不要直接使用我們的文件數(shù)組進(jìn)行上傳，你會(huì)發(fā)現(xiàn)傳給后臺(tái)的是兩個(gè)Object
? ? ? this.files.forEach(function (file) {
? ? ? ? ? // 遍歷files數(shù)組，將file添加到FormData對(duì)象中
? ? ? ? fd.append("file", file, file.name)
? ? ? })
? ? ? // 請(qǐng)求后端接口
? ? ? nanoApi
? ? ? ? .uploadFile(fd)
? ? ? ? .then((res) => {
? ? ? ? ? console.log("上傳文件", res)
? ? ? ? })
? ? ? ? .catch((error) => {
? ? ? ? ? console.log("上傳失敗" + error)
? ? ? ? })
? ? },
? }
}
</script>

3.axios封裝

axios是封裝好的，下面是請(qǐng)求上傳接口參數(shù)。

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

到此這篇關(guān)于vue封裝el-upload批量上傳只請(qǐng)求一次接口的文章就介紹到這了,更多相關(guān)vue el-upload上傳請(qǐng)求接口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: