axios直传阿里云，获取上传进度已以及取消上传

之前写过用  原生上传阿里云 的（传后台也是一样的，区别只在于路径以及form），之后发现axios本来就支持获取上传进度和暂停上传，所以更新一个axios上传的demo。

upload(file){
 1.创建 oss的form对象
 2.创建 cancelToken(用来取消上传），onUploadProgress（用来获取上传进度）
 3.上传
        var date = new Date()
        var s = date.getTime()
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var version = '01'
        //创建上传 from 开始
       var ossData = new FormData()
       ossData.append('name', file.file.name)        ossData.append(
          'key',
          data.dir + '/' + y + '/' + m + '/' + d + '/' + s + '/' + 'apkName' + version + '.apk'
        )
        ossData.append('policy', data.policy)
        ossData.append('OSSAccessKeyId', data.accessid)
        ossData.append('success_action_status', 201)
        ossData.append('signature', data.signature)
        ossData.append('file', file.file, file.file.name)
        //创建上传 from 结束
  
      var cancelToken = axios.CancelToken
      this.source = cancelToken.source()
      var config = {
          cancelToken: this.source.token,
          onUploadProgress: progressEvent => {
            console.log(progressEvent)//progressEvent中包含上传信息
          this.progressFunction(progressEvent)
          }
        }
        //以上代码是为了获取上传进度以及取消上传用的，没需求可以不使用
      upLoad(url, ossData, config).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err, 'err')
        })
      //调用upLoad方法是因为项目中对axios进行了封装，
        具体封装方式可以看我下面的链接，不封装的方式我会写在下面
    

}，
progressFunction(event) {
// 设置进度显示
      if (event.lengthComputable) {
        var percent = Math.floor(event.loaded / event.total * 100)
        if (percent > 100) {
          percent = 100
        }
        this.uploadPercent = percent
      } },
resetUpload() {
      //取消上传
      if (this.source) {
      this.source.cancel('取消')
      }
},

《对axios的封装》

直接走axios的方式

    axios({
            url:url,
            method:'post',
            onUploadProgress: progressEvent => {
                  console.log(progressEvent)//progressEvent中包含上传信息
               this.progressFunction(progressEvent)
             },
            data:ossData,
            cancelToken: this.source.token
            
        }).then(res =>{
            console.log(res)
        })