axios+element 实现上传进度条功能(可终止上传)

上传较大附件（如视频）时应用(可终止上传)

主要使用方法

axios-cancelToken：axios的config中提供了一个cancelToken属性，可以通过传递一个新的CancelToken对象来在请求的任何阶段关闭请求。
axios-onUploadProgress ：监控请求进度

实现功能：
1.实时显示上传进度
2.可以终止上传
3.限制上传格式及大小
下方demo使用dialog进行展示进度，可自行修改为其他方式。

<template>
  <div>
	<el-upload ref="upload" action :before-upload="videoBeforeUpload" :http-request="videoUploadRequest" :show-file-list="false">
       <el-button type="primary" >
          上传视频
        </el-button>
      </el-popover>
    </el-upload>
    <el-dialog :visible.sync="progressDialog" width="900px" :before-close="handleProgressClose" center>
      <el-progress :text-inside="true" :stroke-width="26" :percentage="videoPercent"></el-progress>
      <div class="text-center marginTop10">正在上传，请等待</div>
    </el-dialog>
   </div>
</template>

<script>
import axios from 'axios'
let CancelToken = axios.CancelToken;//axios的config中提供了一个cancelToken属性，可以通过传递一个新的CancelToken对象来在请求的任何阶段关闭请求。
let source = CancelToken.source();

export default {
  data() {
    return {
      progressDialog: false,
      videoPercent: 0,
      source: null,
    };
  },
  created() {
  },
  methods: {
    videoBeforeUpload(file) {
      const isJPG =
        file.name.toLowerCase().indexOf('.mp4') > -1 ||
        file.name.toLowerCase().indexOf('.mov') > -1||
        file.name.toLowerCase().indexOf('.mkv') > -1;
      const isLt1M = file.size / 1024 / 1024 < 200;
      if (!isJPG) {
        this.$message.error("上传文件格式不正确");
      }
      if (!isLt1M) {
        this.$message.error("上传视频大小不能超过 200MB!");
      }
      return isJPG && isLt1M;
    },

    videoUploadRequest(data) {
      let _this = this;
      var formData = new FormData();
      formData.append("file", data.file);
      _this.$axios({
        method: 'post',
        url:  '', //上传接口
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
        cancelToken: source.token,
        onUploadProgress(progressEvent) {//监控上传进度靠这个方法
          var total = progressEvent.total  //文件总大小
          var loaded = progressEvent.loaded //文件已上传大小
          if (!_this.progressDialog) {
            _this.progressDialog = true
          }
          _this.videoPercent = parseInt((loaded / total * 100).toFixed(0)) //实时监测上传进度
          if (total == loaded) { //两值相等时代表上传成功
            _this.videoPercent = 0
            _this.progressDialog = false
          }
        }
      }).then((res) => {
        //请求成功结果回调，此处进行页面渲染，提示等操作 
        //...xxx
        _this.videoUploadLoaing = false;
      }).catch((error) => {
        _this.progressDialog = false
        if (_this.$axios.isCancel(error)) {
          _this.$message({
            message: "已终止上传",
            type: 'info',
            duration: 3 * 1000
          })
        } else {
          _this.videoUploadLoaing = false;
          _this.$message({
            message: error.message,
            type: 'error',
            duration: 3 * 1000
          })
        }
      });
      
    },
    handleProgressClose(done) {
      let _this = this
      this.$confirm('确定要取消上传当前视频吗？')
        .then(() => {
          done();
          source.cancel('中止上传');
          source = CancelToken.source(); //CancelToken
        })
        .catch(() => {
          done();
        });
    },

};
</script>