正常情况下on-progress函数的file参数有个进度百分比的属性值可以直接使用，但有时候会因为mockjs引入的问题导致on-progress方法无法触发，一般情况下注释mock就可以实现on-progress的使用。但一般接手的项目，项目里已经很多地方有存在引用mockjs，自己注释容易导致页面有新的问题
解决方法：可以自己用定时器写一个模拟进度条，用on-change代替on-progress
<el-upload
:action="uploadFileReq"
ref="form"
:on-change="handleChange"
:before-upload="beforeUpload"
:auto-upload="false"
:file-list="fileList"
:show-file-list="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<el-button type="primary" @click="sendClick">上传</el-button>
<div v-if="showProgress" class="up_progress">
<el-progress :percentage="progressPercent" :text-inside="true" :stroke-width="2" status="success"> </el-progress>
</div>
new Vue({
el: '#app',
data: {
progressPercent: 0,
showProgress: false, // 是否显示进度条
fileList: [],
},
methods: {
// change事件
handleChange(file, fileList) {
if(fileList.length>1) {
fileList.splice(0,1)
}
this.files = file.raw
this.fileList = fileList
this.beforeUpload(file)
// file属性开始上传status值为ready,上传成功status的值为success
if(file.status == 'ready') {
this.progressPercent = 0
}
if(file.status == 'success') {
this.progressPercent = 100
this.showProgress = false
}
},
// 上传文件之前的钩子，参数为上传的文件，若返回false或者返回promise且被reject，则停止上传
beforeUpload(file) {
let extension = file.name.substring(file.name.lastIndexOf(".")+1.toLowerCase()
let size = file.size/1024/1024
},
// 点击上传按钮
sendClick() {
this.$refs['form'].vilidate((valid){
// 判断是否已添加文件
if(!this.files){
this.$message.warning("请先上传文件！")
return;
}
// 显示进度条
this.showProgress = true
// 计时器中对百分比进行累加，达到99停止累加，大于99时清空定时器
const interval = setInterval (() => {
if(this.progressPercent >= 99) {
clearInterval(interval)
return
}
this.progressPercent += 1
}, 20)
let formData = new formData()
let keys = Object.keys(this.form)
for(let i = 0; i < keys.length; i++) {
formData.append(keys[i], this.form[keys[i])
}
formData.append("file", this.files)
uploadData(formData).then((response) => {
this.progressPercent = 100
this.$message.success("上传成功")
this.showProgress = false
this.files = ''
this.fileList = []
}).catch((err){
this.$message.error("上传失败")
this.showProgress = false
})
})
},
}
})
