el-upload实现上传文件并展示进度条功能
作者：满城风絮，梅子黄时雨
这篇文章主要介绍了el-upload实现上传文件并展示进度条，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
el-upload实现上传文件并展示进度条
el-upload在实现文件上传时无法触发on-progress钩子，即使调用后端接口并成功的情况下都无法触发，可以通过如下配置来解决：
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添加至调用后端接口，即可成功获取进度~
html:
前端-上传文件获取进度条：
<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 {
// 进度条
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的基本使用方法很简单，参考官网的例子即可，这里记录几个常用的属性
<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">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>- class：可以自己修改一下样式
- name：这个name很重要，错了后台接收不到文件，官方是这样解释的 上传的文件字段名 ,实际上就是后端对应的接口参数的名字，后端可能是这么定义的 public AjaxResult uploadFile(MultipartFile file) throws Exception
- action：就是后端接收文件的接口地址
- headers：有些程序用token作为鉴权依据，通常把token放在header中，headers长这样子：headers: { Authorization: this.$store.getters.token }
- beforeRemove：删除之前可以弹出个提示框，问问要不要删除，就像这样 ： return this.$confirm(确定移除 ${file.name}？)
- on-exceed：官方这么解释文件超出个数限制时的钩子 ,一般应用这个钩子弹出一个提示信息，告诉用户文件个数超过限制了
- before-upload：官方这么解释上传文件之前的钩子，参数为上传的文件，若返回 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：是否支持选择多个文件
- file-list：在查看数据的时候，如果我们要回显已经上传的文件，就需要设置这个属性了
fileList = [{name:"附件4.png",
fileName:"/profile/upload/2020/07/21/7e6735cbc848c40a2f2242b56d09fe58.png"},
{name:"新建文本文档.txt",
fileName:"/profile/upload/2020/07/21/34c6389353856c9429405360eaec864d.txt"}]到此这篇关于el-upload实现上传文件并展示进度条的文章就介绍到这了,更多相关el-upload上传文件并展示进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！