前言
在使用element中的el-upload上傳文件或者圖片時(shí)，需要先把el-upload的自動上傳改為手動上傳:auto-upload=“false”然后el-upload內(nèi)部會調(diào)用this.$refs.upload.submit();方法，從而實(shí)現(xiàn)多個(gè)文件上傳。
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、Html
<el-upload class="upload-demo" ref="uploadKpem" :http-request="onUploadKpem" action="" :on-preview="handlePreviewKpem"
:on-remove="handleRemoveKpem" :file-list="fileListKpem" :auto-upload="false" accept=".pem" :limit="1">
<el-button slot="trigger" type="primary">文件選擇</el-button>
<el-button style="margin-left: 10px" type="primary" plain @click="submitUploadKpem()">確認(rèn)上傳</el-button>
</el-upload>
data(){
return {
fileListKpem: [],
}
}
2.上傳
代碼如下（示例）：文章來源：http://www.zghlxwxcb.cn/news/detail-735883.html
//選擇文件
async onUploadKpem(file) {
let formData = new FormData();
formData.append("file", file.file); //文件上傳需要的參數(shù) file 和 token
formData.append("token", this.token);
let upKpem = await UploadFileKpem(formData); //UploadFileKpem 自己封裝的接口
// console.log(upKpem,"上傳")
if(upKpem.code == 200){
....
}else{
....
}
},
//點(diǎn)擊上傳
submitUploadKpem() {
this.$refs.uploadKpem.submit();
},
總結(jié)
需要注意的是
accept 設(shè)置了上傳文件類型 可自己更換
:limit=“1” 設(shè)置了上傳最大個(gè)數(shù)為1
需要多文件上傳時(shí) 跟上面代碼基本一致 需要注意的是onUploadKpem方法里面可以使用map foreach等添加文件 實(shí)現(xiàn)多文件上傳文章來源地址http://www.zghlxwxcb.cn/news/detail-735883.html
到了這里，關(guān)于elementui el-upload 上傳文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
