大家在写项目时肯定会遇到这样的一个需求,在上传文件或者头像过程中用进度条去代替图片上传的过程,这要做的好处是
1、上传大的资源时让用户知道资源正在被上传,而不是点击上传以为卡住了没反应而多次点击上传,导致一下子上传多个文件。
2、对文件上传做一个性能缓冲的效果,让用户能够看到文件的上传进度从而愿意去等待文件的上传。
今天我就用element ui 跟 vue去实现一个图片上传时显示进度条的效果。
在HTML5中新增了一个标签progress表示进度,而axios中对progress进行了封装。
//封装了一个上传图片的接口方法
export const uploadCourseImage = (data, onUploadProgress) => {
return request({
method: 'POST',
url: '',
data,
onUploadProgress
})
}
//在vue.js中调用,通过onUploadProgress方法事件对象中的total与loaed可以获取数据上传的完整大小和正在上传的大小
const { data } = await uploadCourseImage(fd, e => {
this.percentage = Math.floor(e.loaded / e.total * 100)
})
然后我们使用element ui构建页面结构,通过绑定isUploading与percentage来控制进度条是否显示以及进度条中的数值
<template>
<div class="course-image">
<el-progress //进度条组件
v-if="isUploading"//是否显示进度条
typ