axios 进行文件上传

最新推荐文章于 2025-09-25 00:00:47 发布

原创最新推荐文章于 2025-09-25 00:00:47 发布 · 9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传 # axios

JavaScript 同时被 2 个专栏收录

17 篇文章

订阅专栏

Ajax

1 篇文章

订阅专栏

本文介绍了一个使用async函数实现的文件上传功能，并展示了如何通过onUploadProgress回调来实时跟踪文件上传进度。具体包括：创建FormData对象附加文件，利用axios进行异步POST请求，以及更新组件状态显示预览。

async uploadFile () {
      var config = {
        onUploadProgress: (progressEvent) => {
          let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          // this.uploadPercentage = percentCompleted + '%'
          console.log(percentCompleted)
        }
      }
      let formData = new FormData()
      let form = document.getElementById('headImg')
      let file = form.files[0]
      formData.append('file', file)
      let Url = window.URL || window.webkitURL
      var imgURL = Url.createObjectURL(file)
      this.setState({
        headHref: imgURL
      })
      // this.uploadHeader(formData);
      let res = await axios.post('/user/head/upload', formData, config).then(res => {
        this.ticket = res.data.image
        // this.state.upData[tag] = logoTicket
        // this.checkIfCanCommit()
      }).catch(err => { console.error(err) })
      axios.post('user/head/update', {
        head_file: res.data.data.head_file
      })
    }