使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件
引言
在日常的前端開發(fā)中，文件上傳是一個(gè)非常常見的需求，尤其是在用戶需要一次性上傳多個(gè)文件的場景下。ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫，為我們提供了豐富的UI組件，極大地提升了開發(fā)效率。其中，el-upload組件便是一個(gè)功能強(qiáng)大且易于使用的文件上傳組件。
el-upload組件介紹
el-upload是ElementUI提供的文件上傳組件，支持多種文件上傳方式，如普通上傳、拖拽上傳、圖片上傳等。這個(gè)組件不僅能滿足單文件上傳的需求，還能輕松實(shí)現(xiàn)一次性上傳多個(gè)文件。更重要的是，el-upload組件的API設(shè)計(jì)非常簡潔明了，開發(fā)者可以根據(jù)自己的需求進(jìn)行靈活配置。
基本用法
在開始講解具體實(shí)現(xiàn)之前，我們先來看一下el-upload組件的基本用法。以下是一個(gè)簡單的單文件上傳示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<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文件，且不超過500kb</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handlePreview(file) {
console.log(file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
submitUpload() {
this.$refs.upload.submit();
}
}
}
</script>
在這個(gè)示例中，我們通過el-upload組件實(shí)現(xiàn)了一個(gè)簡單的文件上傳功能。action屬性指定了文件上傳的服務(wù)器地址，file-list用于管理已選取的文件列表，on-preview和on-remove則分別用于文件預(yù)覽和刪除的回調(diào)。
實(shí)現(xiàn)多文件上傳
為了實(shí)現(xiàn)一次性上傳多個(gè)文件，我們只需要在el-upload組件中設(shè)置multiple屬性即可。該屬性允許用戶在文件選擇對(duì)話框中一次性選取多個(gè)文件。以下是一個(gè)多文件上傳的示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
multiple>
<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">可以上傳多個(gè)文件</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handlePreview(file) {
console.log(file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
submitUpload() {
this.$refs.upload.submit();
}
}
}
</script>
在這個(gè)示例中，我們添加了multiple屬性，使得文件選擇對(duì)話框允許一次性選擇多個(gè)文件。這樣，用戶便可以輕松地實(shí)現(xiàn)批量上傳。
文件上傳的更多配置
el-upload組件不僅支持多文件上傳，還提供了豐富的配置項(xiàng)，滿足各種文件上傳需求。下面我們?cè)敿?xì)介紹一些常用的配置項(xiàng)：
headers 自定義請(qǐng)求頭
在文件上傳時(shí)，如果需要添加自定義請(qǐng)求頭，可以通過headers屬性進(jìn)行配置。以下是一個(gè)添加自定義請(qǐng)求頭的示例：
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:headers="{
Authorization: 'Bearer YOUR_TOKEN'
}">
</el-upload>
data 上傳附帶參數(shù)
在文件上傳時(shí)，如果需要附帶一些額外的參數(shù)，可以通過data屬性進(jìn)行配置。以下是一個(gè)上傳時(shí)附帶額外參數(shù)的示例：
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:data="{
userId: 123
}">
</el-upload>
limit 限制上傳文件數(shù)量
如果需要限制上傳文件的數(shù)量，可以通過limit屬性進(jìn)行配置，并結(jié)合on-exceed事件進(jìn)行處理。以下是一個(gè)限制最多上傳3個(gè)文件的示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
:limit="3"
:on-exceed="handleExceed"
multiple>
<el-button slot="trigger" size="small" type="primary">選取文件</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`當(dāng)前限制選擇 3 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
}
}
}
</script>
before-upload 上傳前的鉤子
在文件上傳之前，如果需要對(duì)文件進(jìn)行一些處理或校驗(yàn)，可以使用before-upload鉤子。以下是一個(gè)在上傳前進(jìn)行文件大小校驗(yàn)的示例：
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:before-upload="beforeUpload"
multiple>
<el-button slot="trigger" size="small" type="primary">選取文件</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上傳文件大小不能超過 2MB!');
}
return isLt2M;
}
}
}
</script>
在這個(gè)示例中，我們?cè)谖募蟼髑皩?duì)文件大小進(jìn)行了校驗(yàn)，如果文件大小超過2MB，則會(huì)提示錯(cuò)誤信息并阻止上傳。
拖拽上傳
el-upload組件還支持拖拽上傳功能，用戶可以通過拖拽文件到指定區(qū)域來實(shí)現(xiàn)文件上傳。以下是一個(gè)拖拽上傳的示例：
<template>
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
<div class="el-upload__tip" slot="tip">支持批量上傳</div>
</el-upload>
</template>
在這個(gè)示例中，我們通過添加drag屬性，使得el-upload組件支持拖拽上傳。用戶可以將文件拖拽到指定區(qū)域，輕松實(shí)現(xiàn)文件上傳。
自定義上傳請(qǐng)求
有時(shí)，我們可能需要對(duì)上傳請(qǐng)求進(jìn)行更細(xì)粒度的控制，例如使用axios等庫進(jìn)行上傳。el-upload組件提供了http-request鉤子，允許我們自定義上傳請(qǐng)求。以下是一個(gè)使用axios自定義上傳請(qǐng)求的示例：
<template>
<el-upload
class="upload-demo"
:http-request="customRequest"
multiple>
<el-button slot="trigger" size="small" type="primary">選取文件</el-button>
</el-upload>
</template>
<script>
import axios from 'axios';
export default {
methods: {
customRequest({ file, onProgress, onSuccess, onError }) {
const formData = new FormData();
formData.append('file', file);
axios.post('https://jsonplaceholder.typicode.com/posts/', formData, {
onUploadProgress: (event) => {
let percent = Math.round((event.loaded * 100) / event.total);
onProgress({ percent });
}
}).then(response => {
onSuccess(response.data);
}).catch(error => {
onError(error);
});
}
}
}
</script>
在這個(gè)示例中，我們使用axios庫自定義了上傳請(qǐng)求。通過http-request鉤子，我們可以完全控制上傳過程，并實(shí)現(xiàn)更加靈活的上傳邏輯。
小結(jié)
ElementUI的el-upload組件為我們提供了強(qiáng)大的文件上傳功能，不僅支持單文件上傳，還可以輕松實(shí)現(xiàn)一次性上傳多個(gè)文件。通過靈活配置組件的各項(xiàng)屬性和鉤子函數(shù)，我們可以滿足各種復(fù)雜的文件上傳需求。無論是添加自定義請(qǐng)求頭、上傳附帶參數(shù)，還是限制上傳文件數(shù)量、拖拽上傳，el-upload組件都能輕松應(yīng)對(duì)。
在日常開發(fā)中，我們可以根據(jù)實(shí)際需求，對(duì)el-upload組件進(jìn)行更深層次的定制和優(yōu)化，從而提升用戶體驗(yàn)和系統(tǒng)性能。希望這篇文章能夠幫助大家更好地理解和使用el-upload組件，讓文件上傳變得更加簡單和高效。
以上就是使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件的詳細(xì)內(nèi)容，更多關(guān)于ElementUI el-upload上傳多個(gè)文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
vue實(shí)現(xiàn)微信分享鏈接添加動(dòng)態(tài)參數(shù)的方法
這篇文章主要介紹了vue微信分享鏈接添加動(dòng)態(tài)參數(shù)的實(shí)現(xiàn)方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)
這篇文章主要介紹了Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
因?yàn)楝F(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項(xiàng)目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯(cuò)亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧2023-11-11
這篇文章主要給大家介紹了關(guān)于Vue插件從封裝到發(fā)布的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法
這篇文章主要介紹了vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
Vue.js中computed屬性高效的數(shù)據(jù)處理案例
computed是Vue中一個(gè)計(jì)算屬性,它可以根據(jù)依賴的數(shù)據(jù)動(dòng)態(tài)計(jì)算出一個(gè)新的值,并將其緩存起來,這篇文章主要給大家介紹了關(guān)于Vue.js中computed屬性高效的數(shù)據(jù)處理的相關(guān)資料,需要的朋友可以參考下2024-09-09
基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒成功傳遞問題
這篇文章主要介紹了解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒成功傳遞問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07