vue文件直传阿里云，有进度条，支持中断取消上传

作为后端开发兼顾前端页面的实现，说实话，遇到的问题绝不会少，但方法总比问题多，坚持努力总会有成果的。

最近项目使用vue的el-upload上传文件，因为后期对文件的加载速度及并发数有较高要求，所以文件需上传至阿里云，在实现过程主要有两个功能点需自己实现，其他均可参考文档

1、实现进度条展示

API文档中进度条的实现是通过上传接口返回的，但我们实际的接口基本很难满足这个数据返回，所以我们必须通过监控请求进度从而实现进度条的展示，主要使用onUploadProgress，具体实现如下（省略全部代码，只只展示相关实现，全部实现在最后展示）

<template>
  <div>
    <!-- 进度条 -->
    <el-progress :percentage="uploadPercentage"></el-progress>
  </div>
</template>

<script>
import axios from 'axios'
// 创建实例
const onUploadProgress = axios.onUploadProgress
export default {
  name: 'FileUpload',
  data(){
    return{
      uploadPercentage: 0
    }
  },
  methods: {
    // 文件上传
    fileUpload(url, data){
      axios.post(url, data, {
        onUploadProgress: progressEvent => {
          if (event.lengthComputable) {
            var percent = Math.floor(event.loaded / event.total * 100);
            if (percent >= 100) {
              // 不给100，避免延迟误导用户用户
              percent = 97;
            }
            this.uploadPercentage = percent;
          }
        }
      }).then(res => {
        this.uploadPercentage = 100;
      }).catch(error => {
      })  
    }
  }
}


 

2、中断上传，如取消文件列表数据或关闭上传页面时，应该撤回上传，不然将造成大量垃圾数据，消耗资源，具体实现与进度条类似，都是利用axios的功能，主要使用CancelToken函数，具体如下：

<script>
import axios from 'axios'
const CancelToken = axios.CancelToken
let uploadCancel
export default {
  name: 'FileUpload',
  data(){
    return{
      uploadPercentage: 0
    }
  },
  methods: {
    // 文件上传
    fileUpload(url, data){
      axios.post(url, data, {
        cancelToken: new CancelToken(function executor(c) {
          // executor 函数接收一个 cancel 函数作为参数
          uploadCancel = c;
        })
      }).then(res => {
        this.uploadPercentage = 100;
      }).catch(error => {
      })  
    }
  }
}

注：两者实现一定要先创建实例

3、组件封装全实现