先看原生js怎么做
关键点: 监听请求的upload.onprogress事件
// 发请求
const ajax = (url: string, data: FormData) => {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open('POST', url);
request.onreadystatechange = () => {
if (document.readyState === 'complete' && request.status === 200) {
resolve(request.response);
} else {
reject(new Error('上传失败'));
}
};
request.upload.onprogress = (e: ProgressEvent) => { //这里可以获取进度条的信息
console.log(`${e.loaded/ e.total*100 ||0}%`)
};
request.send(data);
});
};
axios做进度条
要点是发送请求是配置onUploadProgress:
async uploadVideo () {
const {uploadFile} = this
if(uploadFile){
let param = new FormData() //创建form对象,私有,无法直接获取,只能通过get来查看其中的元素
param.append('file',uploadFile)
let config = {
headers:{
'Content-Type':'multipart/form-data',
},
transformRequest: [function (data) {
return data
}],
onUploadProgress: progressEvent => {
let persent = (progressEvent.loaded / progressEvent.total * 100 | 0) //上传进度百分比
console.log(persent)
},
}
axios.post('http://xxxxxxxx/video/upload',param,config) //地址写你们自己的接口
.then(response=>{
var result = response.data
if(result.status == 0){
console.log(result)
}else{
this.$message({
message: '上传失败',
type: 'error',
duration:'1000'
});
}
}).catch(err => {
console.log(err)
})
}
},