js上传文件进度条

项目用的是渐进式vue，用了elementUI的进度条组件。
在网上找了很多参考资料，大家写的好像都差不多。

js部分

data: {
	percentage: 0, // 文件上传进度条
	ifProgress: false, // 进度条是否显示
	progressText: '正在上传中，请稍后...', //进度条上方展示文字
},
// 上传文件-列表中的文件上传
fileUploadFun: function(event, index) {
	if(event.target.files == undefined) {
		that.$message({message: '您所使用的浏览器版本过低不支持此功能，请升级浏览器！', type: 'error'})
		return
	}
	var that = this, file = event.target.files[0];
	if(event.target.files.length > 1) {
		that.$message({message: '只允许同时上传一个文件！', type: 'error'})
		return
	}
	// that.loading = true;
	var formData = new FormData();
	formData.append('file', file)
	that.ifProgress = true; //进度条显示
	var xhr=new XMLHttpRequest();
	xhr.open('POST', '/uploadFile', true);
	xhr.onreadystatechange=function (){
		//readystate为4表示请求已完成并就绪
		if(this.readyState==4){}
	}
	xhr.upload.onprogress = function(ev) {
		//如果ev.lengthComputable为true就可以开始计算上传进度
		//上传进度 = 100* ev.loaded/ev.total
		if(ev.lengthComputable){
			var precent=100 * ev.loaded/ev.total;
			// console.log(precent);
			//更改进度条，及百分比
			that.percentage = parseInt(precent);
		}
	}
	xhr.send(formData);
	xhr.onload = function(res) {
		that.ifProgress = false;
		var response = JSON.parse(res.currentTarget.response);
		// console.log(response);
		if(response.statusCode == 200) {
			that.progressText = response.message;
			that.$message({message: response.message", type: 'success'})
			// 文件上传的其他操作
		}else {
			that.progressText = response.message;
			that.$message({message:response.message, type: 'error'})
		}
	} //请求完成
	xhr.onerror = function(res) {
		that.ifProgress = false;
		that.$message({message:"网络错误，请刷新网页", type: 'error'})
	} // 请求失败
},

HTML&CSS部分

<style>
/* 进度条相关 */
.progressBox{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,0.8);z-index: 11;}
.progressText{text-align: center;color: #333333;font-size: 16px;position: absolute; top: 45%;margin-top: -40px;width: 100%;}
.el-progress{width: 40%;top: 45%;margin-top: -13px;left: 30%;}
</style>
<div class="progressBox" v-show="ifProgress">
	<div class="progressText">{{progressText}}</div>
	<el-progress :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>
</div>

2021年1月20日，待封装优化。在这里提前给各位拜个早年嘞！