el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條功能
更新時(shí)間：2023年05月24日 14:40:37 作者：滿城風(fēng)絮，梅子黃時(shí)雨
這篇文章主要介紹了el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條
el-upload在實(shí)現(xiàn)文件上傳時(shí)無法觸發(fā)on-progress鉤子，即使調(diào)用后端接口并成功的情況下都無法觸發(fā)，可以通過如下配置來解決：
const config = {
onUploadProgress: progressEvent => {
if (progressEvent.lengthComputable) {
this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
console.log('progressEvent>>', progressEvent)
console.log('uploadProgress>>', _this.uploadProgress)
}
}
}隨后將config添加至調(diào)用后端接口，即可成功獲取進(jìn)度~
html:
前端-上傳文件獲取進(jìn)度條：
<el-upload
v-show="!fileList.length"
ref="fileUpload"
class="upload-demo"
style="display: inline-block;height: 32px;margin-left: 8px"
action="#"
:file-list="fileList"
:http-request="uploadVersion"
:on-change="handleChange"
:on-success="handleSuccess"
:on-progress="handleProgress"
:on-error="handleError"
:auto-upload="true"
:show-file-list="false"
>
<!-- icon_upload.svg-->
<el-button type="primary" style="height: 32px;display: flex;align-items: center"><svg-icon icon-class="icon_upload" style="margin-right: 8px" />上傳文件</el-button>
<!-- <el-input v-model="uploadForm.filename" placeholder="請選擇">-->
<!-- <!– <template slot="append"><el-button–>-->
<!-- <!– size="mini"–>-->
<!-- <!– >–>-->
<!-- <!– 上傳文件–>-->
<!-- <!– </el-button></template>–>-->
<!-- </el-input>-->
</el-upload>
<!-- <el-button size="small" @click="sendClick">上傳</el-button>-->
<div v-if="fileElProgress">
<div class="el-progress-div">
<div><div
v-loading="true"
style="display: inline-block;width: 24px;
height: 16px;
padding-right: 8px;"
/>{{ fileName }}</div>
<span>
<span style="display: inline-block;margin-right: 8px">{{ progressPercent }}%</span>
<el-button type="text" @click="cancelUpload">取消</el-button>
</span>
</div>
<el-progress :percentage="progressPercent" :text-inside="false" :color="customColors" :stroke-width="2" />
<!-- :stroke-width="16" status="scuccess"-->
</div>
<template v-if="!fileElProgress">
<div v-for="item in fileList" :key="item.name" class="fail-list">
<div class="list-item">
<span :style="{color:showFailTip?'#FF3D00':'#fff' }">
<svg-icon :icon-class="showFailTip? 'icon_error_file': 'icon_success_file'" />
{{ item.name }}
</span>
<span style="float: right;display: flex;align-items: center;">
<span style="color: #878D99;display: inline-block;margin-right: 16px">{{ showFailTip ? '失敗':'成功' }}</span>
<!-- <span>{{ '失敗' }}</span>-->
<el-button style="color: #00E3FF" type="text" size="small" @click="fileList = []">刪除</el-button>
<el-button v-show="showFailTip" style="color: #00E3FF" type="text" size="small" @click="sendClick">重新上傳</el-button>
</span>
</div>
</div>
</template>JS部分
data() {
return {
// 進(jìn)度條
fileList: [],
showFailTip: false,
customColors: [
{ color: 'rgba(223,228,237,0.10)', percentage: 0 },
{ color: '#00adc9', percentage: 100 }
],
fileElProgress: false,
fileProgressText: '',
progressPercent: 0,
}
methodss:{
uploadVersion(params) {
const _this = this
this.uploadForm.filename = params.file.name
this.fileFormData = new FormData()
this.fileFormData.append('file', params.file)
this.fileFormData.append('md5File', params.file)
this.fileName = params.file.name
const config = {
onUploadProgress: progressEvent => {
if (progressEvent.lengthComputable) {
_this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
console.log('progressEvent>>', progressEvent)
console.log('uploadProgress>>', _this.uploadProgress)
this.fileElProgress = true
if (this.progressPercent < 99) {
this.progressPercent = _this.uploadProgress
} else {
this.fileProgressText = '正在上傳'
}
}
}
}
uploadFile(this.fileFormData, config).then(res => {
if (res.data === 'success') {
this.fileProgressText = '上傳成功'
} else {
this.showFailTip = true
}
this.fileElProgress = false
})
},
}
},el-upload的使用方法
基本使用方法
el-upload的基本使用方法很簡單，參考官網(wǎng)的例子即可，這里記錄幾個(gè)常用的屬性
<el-col :span="12">
<el-form-item label="附件" prop="attachments">
<el-upload
class="upload"
name="file"
:action="doUpload"
:headers="headers"
:before-remove="beforeRemove"
:limit="3"
:on-exceed="handleExceed"
:before-upload="handleBeforeUpload"
:on-success="uploadSuccess"
:multiple="true"
:file-list="fileList"
>
<el-button type="text" size="small" icon="el-icon-upload">點(diǎn)擊上傳</el-button>
</el-upload>
</el-form-item>
</el-col>- class：可以自己修改一下樣式
- name：這個(gè)name很重要，錯(cuò)了后臺接收不到文件，官方是這樣解釋的 上傳的文件字段名 ,實(shí)際上就是后端對應(yīng)的接口參數(shù)的名字，后端可能是這么定義的 public AjaxResult uploadFile(MultipartFile file) throws Exception
- action：就是后端接收文件的接口地址
- headers：有些程序用token作為鑒權(quán)依據(jù)，通常把token放在header中，headers長這樣子：headers: { Authorization: this.$store.getters.token }
- beforeRemove：刪除之前可以彈出個(gè)提示框，問問要不要?jiǎng)h除，就像這樣 ： return this.$confirm(確定移除 ${file.name}？)
- on-exceed：官方這么解釋文件超出個(gè)數(shù)限制時(shí)的鉤子 ,一般應(yīng)用這個(gè)鉤子彈出一個(gè)提示信息，告訴用戶文件個(gè)數(shù)超過限制了
- before-upload：官方這么解釋上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。
我們可以在上傳之前判斷一下用戶選擇的文件是不是符合要求，比如文件類型是否正確、文件大小是否超限等。例如：
handleBeforeUpload(file) {
const uploadLimit = 2
const uploadTypes = ['jpg', 'png', 'doc', 'docx', 'xlsx', 'zip', 'rar', 'pdf']
const filetype = file.name.replace(/.+\./, '')
const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
if (!isRightSize) {
this.$message.error('文件大小超過 ' + uploadLimit + 'MB')
return false
}
if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
this.$message.warning({
message: '請上傳后綴名為jpg、png、txt、pdf、doc、docx、xlsx、zip或rar的附件'
})
return false
}
return true
}- multiple：是否支持選擇多個(gè)文件
- file-list：在查看數(shù)據(jù)的時(shí)候，如果我們要回顯已經(jīng)上傳的文件，就需要設(shè)置這個(gè)屬性了
fileList = [{name:"附件4.png",
fileName:"/profile/upload/2020/07/21/7e6735cbc848c40a2f2242b56d09fe58.png"},
{name:"新建文本文檔.txt",
fileName:"/profile/upload/2020/07/21/34c6389353856c9429405360eaec864d.txt"}]到此這篇關(guān)于el-upload實(shí)現(xiàn)上傳文件并展示進(jìn)度條的文章就介紹到這了,更多相關(guān)el-upload上傳文件并展示進(jìn)度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在WEB開發(fā)中，javascript提供了許多函數(shù)供開發(fā)人員使用，這些函數(shù)在Ajax流行前足夠了，但要構(gòu)建一個(gè)交互性強(qiáng)些的應(yīng)用恐怕就麻煩了。2009-10-10
這篇文章主要介紹了js中數(shù)組的常用方法,結(jié)合實(shí)例形式分析了js中的常用數(shù)組方法,如push、concat、pop、splice、reverse、join等功能與用法,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS中使用FormData上傳文件、圖片的方法的相關(guān)資料,需要的朋友可以參考下2016-08-08
JS遠(yuǎn)程獲取網(wǎng)頁源代碼實(shí)例
獲取網(wǎng)頁源代碼的方法有很多，本文為大家介紹下使用JS是如何做到的，感興趣的朋友可以學(xué)習(xí)下哦2013-09-09
用JavaScript實(shí)現(xiàn)用一個(gè)DIV來包裝文本元素節(jié)點(diǎn)
當(dāng)我試圖將文本(可能也包含HTML元素)用一個(gè)DIV元素包起來時(shí)，可以使用下面的方法，需要的朋友可以參考下2014-09-09
firefox下input type="file"的size是多大
firefox對type="file" 的input的width定義目前是不支持的，但是FF支持size屬性，可以給size設(shè)置一個(gè)值，來控制上傳框的大小2011-10-10
微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要介紹了微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)模板,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
想象一下，你把一個(gè)重要內(nèi)容放在一個(gè)彈出窗口，又不聚集到這個(gè)窗口。讓使用屏幕閱讀器的同學(xué)情何以堪，只有當(dāng)他們 tab 到這頁面結(jié)束，還繼續(xù) tab，才可能找到這個(gè)彈窗2011-10-10
這篇文章主要介紹了js獲取object類型里鍵值的方法,需要的朋友可以參考下2014-02-02
簡單實(shí)現(xiàn)js點(diǎn)擊展開二級菜單功能
這篇文章主要教大家簡單實(shí)現(xiàn)js點(diǎn)擊展開二級菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05