vue上传图片视频获取进度

上传图片/视频获取上传进度
上传图片/视频因数据量大时，或者网络不佳时，则需要显示上传进度

<input type="file"  ref="video" accept="video/mp4"  @change="uploadvideo($event)"/>

uploadvideo(e){   
	var files = this.$refs.video.files[0]
	var datas = new FormData()
	datas.append("file",files)
	var config = {          
		onUploadProgress:progressEvent=>{
			var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
		    //complete为上传时的进度 0-100
		}
	}
	const ins= this.axios.create({withCredentials:false})            //跨域请求是否提供凭据信息
	ins.post("/api/video",datas,config).then((res)=>{
		//请求操作
	})
	e.target.value = ""
},

但是以上方法可能会导致一个错误，我在使用的时候报了一个：request.upload.addEventListener in not a function。

解决方法如下：
1、在 node_modules/mockjs/dist/mock.js 的8308行加上下面这句代码

MockXMLHttpRequest.prototype.upload = xhr.upload;

2、在 node_modules/mockjs/src/xhr/xhr.js 的216行加上上面这句代码
最好同时加上，以防万一

详情链接：关于上传视频监听进度报错

来源：https://blog.csdn.net/TanHao8/article/details/99598663