vue3中element-plus?Upload上傳文件代碼示例
更新時間:2023年08月18日 09:02:29 作者:拿鐵喝布丁
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關資料,在時間開發(fā)中上傳文件是經常遇到的一個需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
先上效果圖:

上傳后:

頁面:
<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">
僅允許上傳一個文件,僅限pdf格式
</div>
</template>
</el-upload>我這里做個限制,僅限上傳一個pdf文件,如果不需要可以去掉,更多api請參考官方upload上傳官方文檔
js部分:
const fileList = ref<UploadUserFile[]>([]);
const handleChange = (file, fileList) => {
console.log(file, fileList);
ruleForm.upload = fileList
//限制文件數量,此處設置限制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); //查看接口返回的數據
}, function (response) {
console.log("錯誤信息:" + response)
});
}
};完結,撒花~
總結
到此這篇關于vue3中element-plus Upload上傳文件的文章就介紹到這了,更多相關vue3 element-plus Upload上傳文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
react+vite動態(tài)導入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實現動態(tài)表格提交參數動態(tài)生成控件的操作
這篇文章主要介紹了vue實現動態(tài)表格提交參數動態(tài)生成控件的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11

