Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
更新時間：2023年08月10日 11:05:28 作者：柯曉楠
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧
1. 需求
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時，如果單文件上傳是比較簡單的，但是在實際需求中，往往會在上傳文件時伴隨著一些其他參數(shù)，效果如下圖：
在上傳指定類型的文件時，例如HTTPS證書的文件類型必須為 .jks 格式，還必須要伴隨一些額外的參數(shù)。
2. 思路
el-upload 上傳組件提供了一些參數(shù)：
| 參數(shù) | 說明 |
|---|---|
| data | 上傳時附帶的額外參數(shù) |
| accept |
3. 示例代碼
HTML代碼：
<div class="upload-button">
<el-upload
ref="certificateUpload"
class="upload-container"
:action="uploadAPI"
:auto-upload="false"
name="multipartFile"
:with-credentials="true"
:data="uploadObjs"
:file-list="fileList"
accept=".jks"
:before-upload="onBeforeUpload"
:before-remove="onBeforeRemove"
:on-success="onUploadSuccess"
:on-error="onUploadError"
:on-change="onUploadChange"
>
<el-button type="primary" size="mini" icon="el-icon-upload2">選擇證書</el-button>
</el-upload>
</div>JS代碼：
export default {
data() {
return {
uploadAPI: '',
uploadObjs: {},
fileList: []
}
},
methods: {
// 文件上傳前鉤子
onBeforeUpload() {
// 可以在上傳前的鉤子函數(shù)中添加額外參數(shù)
this.uploadObjs = {
... // 添加的參數(shù)字段
}
},
onBeforeRemove() {
},
onUploadSuccess() {
},
onUploadError() {
},
onUploadChange() {
}
}
}到此這篇關(guān)于Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)的文章就介紹到這了,更多相關(guān)Element UI 文件上傳帶參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了el-table表頭添加勾選框的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vscode下的vue文件格式化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue3 實現(xiàn)雙盒子定位Overlay的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
本篇文章給大家分享了Vue取消eslint語法限制的相關(guān)知識點內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08
methods是如何綁定this的 methods綁定上下文執(zhí)行環(huán)境是通過bind來進行的呢,本文給大家介紹Vue中methods實現(xiàn)原理是什么,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了在Vue項目中使用Typescript的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2前端生成二維碼并實現(xiàn)掃碼跳轉(zhuǎn)完整教程
在現(xiàn)代Web應(yīng)用開發(fā)中,二維碼掃描已成為連接物理世界與數(shù)字世界的核心橋梁,這篇文章主要介紹了Vue2前端生成二維碼并實現(xiàn)掃碼跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-04-04