el-upload 实现自定义多文件上传显示上传进度，及多文件中断上传

上传的时候如果发现你的百分比数字没动，有可能是你开启了页面翻译（本人在chrome就碰到这种问题）。

<template>
  <div>
    <el-upload
        class="upload-demo"
        ref="upload"
        action="void"
        :http-request="customUpload"
        :on-remove="handleRemove"
        :on-progress="progressA"
        :file-list="fileList"
        multiple
        :auto-upload="true">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      fileList: [],
      cancel: {}
    }
  },
  components: {},
  mounted() {
  },
  methods: {
    /**
     * 自定义上传
     **/
    customUpload(file) {
      let FormDatas = new FormData();
      FormDatas.append('file', file.file);
      axios({
        url: 'https://jsonplaceholder.typicode.com/posts/',
        method: 'post',
        data: FormDatas,
        //上传进度
        onUploadProgress: (progressEvent) => {
          let num = progressEvent.loaded / progressEvent.total * 100 | 0;  //百分比
          file.onProgress({percent: num})     //进度条
        },
        cancelToken: new axios.CancelToken((c) => {
          this.cancel[file.file.uid] = c;
        })
      }).then(data => {
        file.onSuccess(); //上传成功(打钩的小图标)
      }).catch(e => {
        // axios.isCancel 中断上传执行
        if (axios.isCancel(e)) {
          console.log(e)
        } else {

        }
      })
    },

    /**
     * 文件正在上传时的钩子
     **/
    progressA(event, file) {
    },

    /**
     *  中断上传文件
     **/
    handleRemove(file) {
      this.$refs.upload.abort();
      this.cancel[file.uid]('取消上传')
      this.$message({message: '成功移除' + file.name, type: 'success'});
    },
  },
}
</script>
<style>
</style>