vue3中element-plus?Upload上傳文件代碼示例
先上效果圖:
上傳后:
頁(yè)面:
<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格式的文件');//限制文件類(lèi)型 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)文章
基于element-ui中el-select下拉框選項(xiàng)過(guò)多的優(yōu)化方案
這篇文章主要介紹了基于element-ui中el-select下拉框選項(xiàng)過(guò)多的優(yōu)化方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)
這篇文章主要介紹了使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫(xiě)法
父子組件通信,都是單項(xiàng)的,很多時(shí)候需要雙向通信。這篇文章主要介紹了vue 自定義組件 v-model雙向綁定、 父子組件同步通信,需要的朋友可以參考下2017-11-11Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例
這篇文章主要為大家介紹了Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01解決vue無(wú)法設(shè)置滾動(dòng)位置的問(wèn)題
這篇文章主要介紹了解決vue無(wú)法設(shè)置滾動(dòng)位置的問(wèn)題 ,需要的朋友可以參考下2018-10-10vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟
Vite是一個(gè)快速的構(gòu)建工具,Vue3是一個(gè)流行的JavaScript框架,下面這篇文章主要給大家介紹了關(guān)于vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05