繁体   English   中英

使用 Axios 取消 File Upload Post 请求

[英]Cancel File Upload Post request using Axios

我正在尝试实现取消功能以在上传视频时取消视频的文件上传。 这是我的前端在视频上传时的样子

在此处输入图像描述

这是我使用 axios 发布请求的代码:

export function processPost (body, callback, errorUpdate) {
// config for post
var config = {
  timeout: 300000,
  headers: { 'content-type': 'multipart/form-data' }

}

// url for server endpoint
var url = 'http://localhost:5000/uploader'

// actual post
axios
  .post(url, body, config)
  .then(callback)
  .catch(function (error) {
    // Non 200 Response
    if (error.response) {
      errorUpdate('non 200 response from server')
      // Request made but no response received
    } else if (error.request) {
      errorUpdate('no response from server')
      // something else happened
    } else {
      errorUpdate('Something Else Happened')
    }
    throw error
  })
}

这是前端的代码:

export default class Welcome extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      state: 'PENDING',
      selectedFile: null
    }
    this.handleClick = this.handleClick.bind(this)
    this.post = this.post.bind(this)
  }

  handleClick () {
    if (this.state.state === 'PENDING') {
      this.refs.fileUploader.click()
    } else {
      cancelPost()
      this.setState({ state: 'PENDING' })
    }
  }

  handleChange (selectorFiles) {
    if (selectorFiles.length === 0) return
    console.log(selectorFiles)
    this.post(selectorFiles[0])
  }

  post (file) {
    // set screen to loading
    this.setState({
      state: 'PROCESSING',
      selectedFile: file
    })

    // set up body
    const data = new FormData()
    data.append('file', file)

    // pass in header, body, then callback
    processPost(data,
      resp => {
        console.log(resp.data)
        this.props.successfulPost(file, URL.createObjectURL(file), resp.data.boardTranscription, resp.data.audioTranscription)
      },
      error => {
        // if there is an error, log it and reset state
        console.log(error)
        this.setState({ state: 'PENDING' })
      })
  }

  render () {
    var jumboClass = classNames({
      'jumbotron col-8 offset-2 light-pink text-center': true,
      'jumboProcessing': this.state.state === 'PROCESSING'
    })

    var input
    var loading
    if (this.state.state === 'PROCESSING') {
      input = null
      loading = (
        <div>
          <div className="spinner-border" role="status">
            <span className="sr-only">Loading...</span>
          </div>
          <p>processing {this.state.selectedFile.name} ...</p>
          <button className={'btn btn-outline-light'} onClick={this.handleChange('')}>Cancel</button>
        </div>
      )
    } else {
      input = (
        <React.Fragment>
          <br></br>
          <button
            className={'btn-light btn-lg'}
            onClick={this.handleClick}
          >Upload Video</button>
          <input id="file" ref="fileUploader" type="file" accept='video/*'
            style={{ display: 'none' }}
            onChange={ (e) => this.handleChange(e.target.files) } />
        </React.Fragment>
      )
      loading = null
    }
    return (
      <div className={'row vertical-center'}>
        <div className={jumboClass}>
          <h2 className={'h2 font-size:10vw'}>Welcome to AutoNote!</h2>
          <h6 className={'h6 font-size:5vw'}>Upload a video to generate a linked transcription.</h6>
          {input}
          <br></br>
          {loading}
        </div>
      </div>)
  }
}

Welcome.propsType = {
  successfulPost: PropTypes.function
}

我将如何在 Axios 中实现取消功能,以便当用户单击“取消”按钮时,发布请求将被取消? 任何帮助深表感谢。 谢谢!

您需要使用CancelToken

基本上,你需要传递一个canceltoken在配置对象,而使用axios.post ,当你想取消,你可以调用取消功能。

例子:

let cancelTokenSource = axios.CancelToken.source();

然后,在请求配置对象中,将令牌作为cancelToken说:

config = { ...otherConfigs, cancelToken : cancelTokenSource.token }

所以现在,我们可以使用

 cancelTokenSource.cancel('Upload cancelled');

在您想说的任何地方取消,点击某个取消按钮。

我认为应该这样做:

您首先必须创建一个取消令牌,如下所示,并在您的 axios 发布请求之前添加它

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

然后将cancelToken: source.token添加到您的 axios 配置中

var config = {
    /* ... */
    cancelToken: source.token,
}

现在你必须将source存储在一个状态,所以把它放在你的 axios 帖子之后

this.setState({source});

最后创建一个handleCancel()方法并在用户单击取消按钮时调用它

handleCancel() {
    this.state.source.cancel()
}

axios版本0.22.0开始,您应该使用所谓的AbortController来实现所需的行为,因为CancelToken已被弃用。

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
});

// cancel the request
controller.abort();

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM