Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度功能
頁(yè)面代碼
</el-form> <el-form-item> <form id="upload" enctype="multipart/form-data" method="post"> <el-upload ref="upload" class="upload-demo" action="#" :http-request="UploadImage" :on-change="fileChange" :before-upload="beforeUpload" > <!-- :before-upload="beforeUpload"--> <el-button size="small" type="primary" class="el-icon-upload"> 數(shù)據(jù)上傳</el-button> <!-- <div--> <!-- slot="tip"--> <!-- class="el-upload__tip"--> <!-- >只能上傳db文件,且不超過(guò)一個(gè)</div>--> </el-upload> </form> </el-form-item> <!-- <el-progress v-if="progressFlag" />--> <el-form-item label="當(dāng)前文件上傳進(jìn)度"> <el-progress style="width: 200px;margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" /> </el-form-item> </el-form>
script部分
引入axios import axios from 'axios'
methods代碼片段
UploadImage(param) { if (this.filterForm.documentType === '') { this.$message({ message: '請(qǐng)選擇檔案類(lèi)型后并重新上傳', type: 'warning' }) return } else if (this.filterForm.regTargetArea === '') { this.$message({ message: '請(qǐng)選擇區(qū)縣后并重新上傳', type: 'warning' }) return } else { // 上傳新文件時(shí),將進(jìn)度條值置為零 this.progressPercent = 0 this.progressFlag = true const formdata = new FormData() formdata.append('documentType', this.filterForm.documentType) formdata.append('upload', param.file) axios({ url: 'url?token=' + this.$store.getters.token, method: 'post', data: formdata, headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: progressEvent => { // progressEvent.loaded:已上傳文件大小 // progressEvent.total:被上傳文件的總大小 this.progressPercent = (progressEvent.loaded / progressEvent.total * 100) console.info(progressEvent.loaded) console.info(progressEvent.total) } }).then(response => { if (response.data.rel) { this.$message({ message: '文件上傳成功', type: 'success' }) // if (this.progressPercent === 100) { // this.progressFlag = false // this.progressPercent = 0 // } this.logData.upUploadStatus = 1 // 是否上傳成功 1 成功 0失敗 } else { this.logData.upUploadStatus = 0 } this.logData.upRegion = this.filterForm.regTargetArea // areacode this.logData.upFileUrl = response.data.filePath // 上傳文件存儲(chǔ)路徑 this.logData.upQueryType = this.filterForm.documentType // 檔案類(lèi)型id this.logData.upUploadFileSize = response.data.fileSize // 文件大小 this.logData.upUploadFileName = response.data.fileName // 文件名 // 文件上傳成功后添加日志 addUpload(this.logData).then(item => { console.log('新增文件上傳統(tǒng)計(jì)日志成功') }).catch(res => { console.log('新增文件上傳統(tǒng)計(jì)日志失敗') }) param.onSuccess() // 上傳成功的文件會(huì)顯示綠色的對(duì)勾 }).catch(response => { this.$message({ message: '文件上傳失敗', type: 'warning' }) }).then(error => { console.log(error) }) } }
axios請(qǐng)求后臺(tái)時(shí),如有鑒權(quán)機(jī)制記得帶上token
文件上傳前做文件類(lèi)型檢查
beforeUpload(file) { console.log(file) const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) const extension = testmsg === 'db' // const isLt2M = file.size / 1024 / 1024 < 10 if (!extension) { this.$message({ message: '上傳文件只能是db格式!', type: 'warning' }) } // if(!isLt2M) { // this.$message({ // message: '上傳文件大小不能超過(guò) 10MB!', // type: 'warning' // }); // } // return extension || extension2 && isLt2M return extension }
附上效果圖(進(jìn)度條是實(shí)時(shí)動(dòng)態(tài)的)
到此這篇關(guān)于Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度的文章就介紹到這了,更多相關(guān)Vue Element-ui上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx。非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-04-04vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關(guān)于vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'的相關(guān)資料,文中將解決方法介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
這篇文章主要介紹了vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題
這篇文章主要介紹了vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁(yè)面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁(yè)面的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08Vue.directive 自定義指令的問(wèn)題小結(jié)
這篇文章主要介紹了Vue.directive 自定義指令的問(wèn)題小結(jié),需要的朋友可以參考下2018-03-03vue使用Luckysheet插件實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出
本文主要介紹了vue使用Luckysheet插件實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03使用ElementUI修改el-tabs標(biāo)簽頁(yè)組件樣式
這篇文章主要介紹了使用ElementUI修改el-tabs標(biāo)簽頁(yè)組件樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08