Axios发布请求不会从多个文件上载请求中取消单个请求

Question

我正在使用axios上传多个文件。我还为每个显示了多个进度条。我想在用户点击取消按钮时取消单个文件上传，我需要取消请求。但它不起作用。当我取消所有请求时它工作正常。请有人告诉我如何从多个循环中取消单个axios请求。

我尝试过axios-cancel，但它不适合我。这是我的功能。

  uploading(uploadFiles){
    let component = this
    let i;

    let CancelToken = axios.CancelToken
    // let source = CancelToken.source();
    const onUploadProgress = (uploadFile) => (progress) => {
      let percentage = Math.floor((progress.loaded * 100) / progress.total)
      this.setState({percentCompleted : percentage, uploadingFilename : uploadFile})
        if(document.getElementById('myBar'+uploadFile)){
          let bar = document.getElementById('myBar'+uploadFile);
              bar.style.width = percentage + '%';
              bar.innerHTML = percentage + '%';
          if(percentage == 100){
            let el = document.getElementById('col'+uploadFile);
            while ( el.firstChild ) el.removeChild( el.firstChild );   
          }
          $("[id^=imgbar]").unbind().click(function(e){
                 console.log(e.target.id);
                 // component.state.sourceToken.cancel()
                 // let el = document.getElementById('col'+uploadFile);
                 // while ( el.firstChild ) el.removeChild( el.firstChild );

          });
        }
    }

    for(i = 0; i < uploadFiles.length; i++){
        let data = new FormData();
        data.append('aws_url', uploadFiles[i], uploadFiles[i].name);

        let source = CancelToken.source();

        this.setState({sourceToken : source})
        const config = {
            headers: { 'content-type': 'multipart/form-data' },
            cancelToken: source.token,
            onUploadProgress: onUploadProgress(uploadFiles[i].name)
        }

        let src = require('../../../images/delete.png')

        $('#progress').append('<div class="col-lg-11" id="col'+uploadFiles[i].name+'">' + '<div style="width:100%; background-color:#ddd" id="bar'+uploadFiles[i].name+'">' + '<div id="myBar'+uploadFiles[i].name+'" style="text-align: center; line-height: 20px; color: white; height:30px; background-color: #4CAF50;">' + '</div>' + '</div>' + '<img id="imgbar'+uploadFiles[i].name+'" height="17" width="17" src='+src+'>' + '</div>' + '<br>' )

        TaskApi.addDocument(data,this,'newTask',config)
    }