axios 进行文件上传

最新推荐文章于 2025-03-09 14:46:09 发布

一朵红杏

最新推荐文章于 2025-03-09 14:46:09 发布

阅读量8.6k

点赞数 1

分类专栏： Ajax JavaScript 文章标签：文件上传 axios

本文链接：https://blog.youkuaiyun.com/java_goodstudy/article/details/79782231

版权

JavaScript 同时被 2 个专栏收录

17 篇文章

订阅专栏

Ajax

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
      })
    }