使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件
引言
在日常的前端開發(fā)中，文件上傳是一個(gè)非常常見的需求，尤其是在用戶需要一次性上傳多個(gè)文件的場(chǎng)景下。ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫(kù)，為我們提供了豐富的UI組件，極大地提升了開發(fā)效率。其中，el-upload組件便是一個(gè)功能強(qiáng)大且易于使用的文件上傳組件。
el-upload組件介紹
el-upload是ElementUI提供的文件上傳組件，支持多種文件上傳方式，如普通上傳、拖拽上傳、圖片上傳等。這個(gè)組件不僅能滿足單文件上傳的需求，還能輕松實(shí)現(xiàn)一次性上傳多個(gè)文件。更重要的是，el-upload組件的API設(shè)計(jì)非常簡(jiǎn)潔明了，開發(fā)者可以根據(jù)自己的需求進(jìn)行靈活配置。
基本用法
在開始講解具體實(shí)現(xiàn)之前，我們先來(lái)看一下el-upload組件的基本用法。以下是一個(gè)簡(jiǎn)單的單文件上傳示例：
<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è)簡(jiǎn)單的文件上傳功能。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ū)域來(lái)實(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等庫(kù)進(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庫(kù)自定義了上傳請(qǐng)求。通過http-request鉤子，我們可以完全控制上傳過程，并實(shí)現(xiàn)更加靈活的上傳邏輯。
小結(jié)
ElementUI的el-upload組件為我們提供了強(qiáng)大的文件上傳功能，不僅支持單文件上傳，還可以輕松實(shí)現(xiàn)一次性上傳多個(gè)文件。通過靈活配置組件的各項(xiàng)屬性和鉤子函數(shù)，我們可以滿足各種復(fù)雜的文件上傳需求。無(wú)論是添加自定義請(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組件，讓文件上傳變得更加簡(jiǎn)單和高效。
以上就是使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件的詳細(xì)內(nèi)容，更多關(guān)于ElementUI el-upload上傳多個(gè)文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue-types 在 Vue 3 中的使用主要適用于希望進(jìn)行更細(xì)致的 prop 驗(yàn)證的場(chǎng)景,尤其是在 JavaScript 項(xiàng)目中,這篇文章給大家介紹vue3中如何使用vue-types,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要為大家介紹了Vue2?this直接獲取data和methods原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
我們都知道,輪播圖組件模板結(jié)構(gòu)通常是ul包裹li的結(jié)構(gòu),在vue中,li的數(shù)量也通常是由后端接口返回的數(shù)據(jù)決定,下面這篇文章主要給大家介紹了關(guān)于vue3封裝輪播圖組件功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
淺析vue-cli3配置webpack-bundle-analyzer插件【推薦】
小編最近為了優(yōu)化vue項(xiàng)目性能，需要使用webpack-bundle-analyzer插件來(lái)分析報(bào)文件，在網(wǎng)上沒有找到合適的，下面小編給大家寫出來(lái)一個(gè)供大家參考2019-10-10
這篇文章主要介紹了詳解Vue-cli3.X使用px2rem遇到的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會(huì)犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡(jiǎn)單的問題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法，這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來(lái)看看吧。2017-04-04
vue自動(dòng)化路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自動(dòng)化路由的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue項(xiàng)目中如何使用TypeScript相關(guān)配置
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的相關(guān)資料,typescript在開發(fā)過程中廣泛被應(yīng)用,在這里總結(jié)下項(xiàng)目中ts的應(yīng)用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
當(dāng)容器有滾動(dòng)條時(shí),有時(shí)需要將指定的內(nèi)容自動(dòng)滾動(dòng)到可視區(qū)域,怎么實(shí)現(xiàn)呢,下面小編給大家?guī)?lái)了多種方法實(shí)現(xiàn)Vue滾動(dòng)到指定位置,感興趣的朋友跟隨小編一起看看吧2023-08-08