vue+element-ui中上传文件使用Progress自定义实时更新进度条
发布时间：2021-08-18, 17:57:04 分类：HTML | 编辑 off 网址 | 辅助
正文 1751字数 768,549阅读
使用Upload+Progress实现文件上传进度条实时更新功能，需要借助http-request属性。具体使用方法如下：
<el-upload
action="#"
:file-list="fileList"
:on-change="changeData"
:http-request="handleRequest"
:before-upload="beforeUpload">
<el-button class="btn upload-btn">上传附件</el-button>
<div slot="tip" class="el-upload__tip">上传文件大小不超过50M</div>
</el-upload>
<el-progress :stroke-width="16" :percentage="progressPercent"></el-progress>Run code
Cut to clipboard
//上传前对文件大小进行校验
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 50;
if (!isLt2M) {
this.$message.error('上传文件大小大小不能超过 50MB!');
return isLt2M;
}
},
changeData (file, fileList) {
// 数据小于0.1M的时候按KB显示
const size = file.size/1024/1024 > 0.1 ? `(${(file.size/1024/1024).toFixed(1)}M)` : `(${(file.size/1024).toFixed(1)}KB)`
file.name.indexOf('M')>-1 || file.name.indexOf('KB')>-1 ? file.name : file.name += size
},
handleRequest (data) {
let formdata = new FormData()
formdata.append('file', data.file)
const config = {
onUploadProgress: progressEvent => {
// progressEvent.loaded:已上传文件大小
// progressEvent.total:被上传文件的总大小
this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
}
}
this.$axios.post(this.actionURL,formdata,config).then(res => {
if (res.data.code===1) {}
})
},Run code
Cut to clipboard
作者：书山有路_勤为径
链接：https://www.jianshu.com/p/3b00db2ace86
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
链接：https://www.jianshu.com/p/3b00db2ace86
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
（支付宝）给作者钱财以资鼓励 （微信）→
有过 2 条评论 »
<el-upload class="upload-demo" action="#" ref="upimg" :on-success="handleAvatarSuccess" :on-progress="uploadVideoProcess" :http-request="httpRequestLogo" :limit="1" > <el-button size="mini" type="primary">点击上传</el-button> <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> --> </el-upload>handleAvatarSuccess(res, file) { //console.log(213); // this.myData= file; this.$refs.upimg.clearFiles(); //上传成功之后清除历史记录 //this.handleInitTableData(); //初始化表格数据 }, /*uploadVideoProcess(event, file, fileList){ console.log(file.percentage.toFixed(0)); },*/ // 图片上传 httpRequestLogo(file) { if('' === this.categoryprice) { return this.$message.error('请选择图片分类') } let formdata = new FormData() formdata.append('file',file.file) formdata.append('name',file.file.name) formdata.append('categoryId', this.categoryprice) this.loading=true; const config = { onUploadProgress: progressEvent => { // progressEvent.loaded:已上传文件大小 // progressEvent.total:被上传文件的总大小 let progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2)) if(progressPercent>99) this.loading=false; this.progressPercent=progressPercent; //console.log(progressPercent); } } this.$http.post('/image/upload', formdata,config).then(({ data: res }) => { console.log(res) if(1 !== res.code) { return this.$message.error(res.msg) } this.$message.success('上传成功') this.handleAvatarSuccess() this.getDataList() }) },<el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">uploadVideoProcess(event, file, fileList){ this.videoFlag = true; this.videoUploadPercent = file.percentage.toFixed(0); },