上传图片/视频获取上传进度
上传图片/视频因数据量大时,或者网络不佳时,则需要显示上传进度
<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行加上上面这句代码
最好同时加上,以防万一
详情链接:关于上传视频监听进度报错