axios读取文件大小和上传进度

js代码

<template>
  <div style="padding:20px">
    <input type="file" @change="change">

    <div>上传文件</div>
    <progress id="progress" value="" max=""></progress>
    <div id="progressBar_value"></div>
    <div id="progressBar_max"></div>
  </div>
</template>

<script>
import { upload } from '@/api/index.js'
export default {
  methods: {
    change(input) {
      let file = input.currentTarget;
      this.upload(file.files[0])
    },

    upload(file) {
      const formData = new FormData();
      formData.append("file", file);

      let config = {
        onUploadProgress: e => {
          const progressBar = document.getElementById("progress")
          const progressBar_value = document.getElementById("progressBar_value");
          const progressBar_max = document.getElementById("progressBar_max");

          progressBar.max = e.total;
          progressBar.value = e.loaded;
          progressBar_value.innerHTML = `${(e.loaded / 1024 / 1024).toFixed(3)}MB`;
          progressBar_max.innerHTML = `${(e.total / 1024 / 1024).toFixed(3)}MB`;
        }

      }

      upload(formData, config).then(res => {
        console.log('上传成功！')
      })
    }
  }
}
</script>

接口配置

export const upload = function (data, config) {
  return request({
    url: 'xxxx/upload.php',
    method: 'post',
    data,
    onUploadProgress:config.onUploadProgress

  })
}