自定義elementui上傳文件以及攜帶參數(shù)問題
更新時間：2023年08月12日 16:00:30 作者：沃特艾文兒～
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
自定義elementui上傳文件以及攜帶參數(shù)
elementui提供了上傳文件的ui，可以比較方便，我們需要它來完成自定義上傳文件以及攜帶參數(shù)需要改寫其中的一些方法來實現(xiàn)。
下面是一個簡單的上傳標簽
<el-upload
ref="upload"
style="display: inline"
drag
action=""
:before-upload="beforeUploadHandle"
:http-request="handleUploadForm"
:auto-upload="false"
multiple
:limit="1"
:on-exceed="handleExceed">
<el-link icon="el-icon-paperclip" type="primary">添加需要上傳的文件</el-link>
</el-upload>不自動上傳
:auto-upload=“false”
- 限制上傳文件個數(shù)
:limit=“1”
- 上傳之前的校驗
我們需要實現(xiàn)這個方法，來檢測上傳的合法性
:before-upload=“beforeUploadHandle”
- 上傳時需要攜帶參數(shù)
需要上傳的數(shù)據(jù)文件以及參數(shù)在這里來處理添加
:http-request=“handleUploadForm”
- 檢測添加文件是否超過限制
:on-exceed=“handleExceed”
手動上傳
其中的upload對應于上面的ref=“upload”，我們只需要給按鈕實現(xiàn)一個方法執(zhí)行此語句便可以實現(xiàn)自己點擊上傳
this.$refs.upload.submit();
具體實現(xiàn)
上傳限制以及上傳之前的校驗不贅述，這里給出一個簡單的demo。
上傳限制實現(xiàn)類似，只是給出一些提示信息，file便是我們上傳的文件。
beforeUploadHandle(file) {
if (
file.type !== "image/png" &&
file.type !== "image/jpeg"
) {
this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件！");
return false;
}
},攜帶參數(shù)
handleUploadForm(param) {
console.log(this.pid)
let thisInfo = this
let formData = new FormData()
// 在formData中加入我們需要的參數(shù)
formData.append('file', param.file)
formData.append('id', this.pid)
// 向后端發(fā)送數(shù)據(jù)
thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => {
if (res.status === 200) {
thisInfo.$message.success('修改信息成功')
} else {
thisInfo.$message.success('修改信息失敗')
}
thisInfo.formFileList = []
thisInfo.uploadFormFileList = []
})
}element-ui上傳文件攜帶參數(shù)到后臺接收
前端
數(shù)據(jù)
后臺
注意這里要對應，接收的不是mydata，而是具體的值
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家分享一篇Vue-路由導航菜單欄的高亮設置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue實現(xiàn)按需加載組件和異步組件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
element多個table實現(xiàn)同步滾動的示例代碼
本文主要介紹了element多個table實現(xiàn)同步滾動，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了VUE插件vue-treeselect的使用及說明，具有很好的參考價值，希望對大家有所幫助。2023-07-07
Vue?ElementUI?table實現(xiàn)雙擊修改編輯某個內(nèi)容的方法
在實現(xiàn)表格單元格雙擊編輯功能時,需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認編輯,同時,需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
vue jsx 使用指南及vue.js 使用jsx語法的方法
這篇文章主要介紹了vue jsx 使用指南及vue.js 使用jsx語法的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-11-11
keep-alive是Vue中一個非常有用的特性,它可以幫助我們避免重復渲染和減少組件的渲染次數(shù),從而提高應用程序的性能,本文給大家介紹keep-alive組件緩存的相關知識,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vite+vue3代碼風格校驗及格式化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
手把手搭建安裝基于windows的Vue.js運行環(huán)境
手把手教大家搭建安裝基于windows的Vue.js的運行環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Vue3動態(tài)組件怎么進行異常處理？下面本篇文章帶大家聊聊Vue3 動態(tài)組件異常處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02