Vue.js中利用axios实现文件上传进度实时更新

Joe.Ye • 2023-03-12 • Vue

XHR二级增加了progress事件，我们可以据此在浏览器接收新数据期间添加实时数据进度条，从而使得交互更加友好

Vue模板

<div class="progress" @click="upload"
    :style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB ' + progress + ',#E1E6E9 ' + progress + ',#E1E6E9 100%)'}">

Vue JavaScript

var form = new FormData()
form.append('file', vm.$refs.upload.files[0])
form.append('name', name)
var config = {
  onUploadProgress: progressEvent => {
    var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
    this.progress = complete
  },
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}
axios.post(`api/upload_file`,
  form, config).then((res) => {
  if (res.data.status === 'success') {
    console.log('上传成功')
  }
})

关键点在于progress事件，而axios对ajax封装之后需要在axios的config参数里面定义事件处理函数

版权声明：
作者：Joe.Ye
链接：https://www.appblog.cn/index.php/2023/03/12/vue-js-real-time-update-of-upload-progress-using-axios/
来源：APP全栈技术分享
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
Vue.js中利用axios实现文件上传进度实时更新
XHR二级增加了progress事件，我们可以据此在浏览器接收新数据期间添加实时数据进度条，从而使得交互更加友好 Vue模板 <div class="progress" @cl……
<<上一篇
下一篇>>
文章目录
关闭
目 录