JS上传图片文件的进度条提示记录

关键点就是onprogress这个事件，它是XMLHttpRequest对象的一个回调函数，在上传或者下载过程中会周期性执行。接受一个参数event，event有两个参数：

1. loaded：已经传输的数量
2. 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都可以