vue3中element-plus?Upload上傳文件代碼示例
更新時(shí)間：2023年08月18日 09:02:29 作者：拿鐵喝布丁
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時(shí)間開發(fā)中上傳文件是經(jīng)常遇到的一個(gè)需求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
先上效果圖：
上傳后：
頁面：
<el-upload :file-list="fileList" class="upload-demo" action="接口"
multiple v-model="ruleForms.upload" accept=".pdf" :before-upload="changeFiles"
:on-change="handleChanges">
<el-button type="primary">選擇文件</el-button>
<template #tip>
<div class="el-upload__tip">
僅允許上傳一個(gè)文件，僅限pdf格式
</div>
</template>
</el-upload>我這里做個(gè)限制，僅限上傳一個(gè)pdf文件，如果不需要可以去掉，更多api請(qǐng)參考官方upload上傳官方文檔
js部分：
const fileList = ref<UploadUserFile[]>([]);
const handleChange = (file, fileList) => {
console.log(file, fileList);
ruleForm.upload = fileList
//限制文件數(shù)量，此處設(shè)置限制1條
if (fileList.length > 1) {
fileList.splice(0, 1);
}
};
const changeFile = (file, fileList) => {
console.log('file', file, fileList);
if (file.type !== 'application/pdf') {
ElMessage.error('只能上傳pdf格式的文件');//限制文件類型
return false;
} else {
let param = new FormData();
param.append('file', file);
console.log(param);
axios({
method: 'POST',
url: '上傳接口',
data: param
}).then((response) => {
console.log(response); //查看接口返回的數(shù)據(jù)
}, function (response) {
console.log("錯(cuò)誤信息：" + response)
});
}
};完結(jié)，撒花~
總結(jié)
到此這篇關(guān)于vue3中element-plus Upload上傳文件的文章就介紹到這了,更多相關(guān)vue3 element-plus Upload上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vuex中的Mutations的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue中實(shí)現(xiàn)頁面刷新以及局部刷新的方法
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)頁面刷新以及局部刷新的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
vue3 i18n動(dòng)態(tài)獲取key的實(shí)現(xiàn)方式
在Vue3項(xiàng)目中,使用i18n動(dòng)態(tài)獲取keyzh文件時(shí),直接用中括號(hào)無效,需改用數(shù)組形式如$[key, 'zh'],明確指定語言代碼以正確加載翻譯2025-09-09
Vue中component標(biāo)簽解決項(xiàng)目組件化操作
這篇文章主要介紹了Vue中component標(biāo)簽解決項(xiàng)目組件化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue3如何自定義js文件(插件或配置)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue?ant?design?封裝彈窗表單的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue指令詳解之v-if與v-show的對(duì)比與常見應(yīng)用分析
Vue提供了v-if和v-show兩個(gè)指令來實(shí)現(xiàn)條件渲染,雖然它們都能控制元素的顯示與隱藏,但在實(shí)現(xiàn)機(jī)制和使用場(chǎng)景上有著顯著差異,本文將深入探討這兩個(gè)指令的工作原理、性能特點(diǎn)以及適用場(chǎng)景,幫助開發(fā)者在實(shí)際項(xiàng)目中做出合理選擇,感興趣的朋友跟隨小編一起看看吧2025-09-09
Vuex是一個(gè)Vue的狀態(tài)管理工具,狀態(tài)就是數(shù)據(jù),用大白話來說就是Vuex是一個(gè)插件,可以幫我們管理Vue通用的數(shù)據(jù),這篇文章主要介紹了徹底搞懂vuex的相關(guān)資料,需要的朋友可以參考下2026-03-03
vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11