关键点就是onprogress这个事件，它是XMLHttpRequest对象的一个回调函数，在上传或者下载过程中会周期性执行。接受一个参数event，event有两个参数：
- loaded：已经传输的数量
- total：要传输的总数量
var xmlhttp = new XMLHttpRequest(),
method = 'GET',
url = 'https://developer.mozilla.org/';
xmlhttp.open(method, url, true);
xmlhttp.onprogress = function (event) {
//do something
const progressRatio = event.loaded / event.total
};
xmlhttp.send();
使用axios时,利用axios的config配置选项来进行相应的处理 ：
{
// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
}
// 上传进度
let onUploadProgress = (progressEvent) => { //计算progress的百分比方法
this.progressRatio = progressEvent.loaded / progressEvent.total
};
const config = { //axios的配置中可以配置该方法
onUploadProgress,
headers: {
'Content-Type': 'multipart/form-data'
},
withCredentials: false,
};
try {
// 上传到七牛
const res = await axios.post('your path', this.getFromData(data), config);
this.previewImg.src = `${domain}/${res.data.key}`;
} catch (e) {
this.progressRatio = 0;
console.log('上传失败', e)
}
其他也就是一些样式上,配合背景色做一个百分比显示,或者圆形图案做一个canvas的loading都可以
