脚本宝典收集整理的这篇文章主要介绍了vue中利用axios实现文件上传进度实时更新，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

vue模板

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

vue-js

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

关键点在于progress事件,而axios对ajax封装之后需要在axios的config参数里面写好事件处理函数(具体参数写法可查看axios文档)

脚本宝典总结

以上是脚本宝典为你收集整理的vue中利用axios实现文件上传进度实时更新全部内容，希望文章能够帮你解决vue中利用axios实现文件上传进度实时更新所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。