vue使用axios实现文件上传进度的实时更新详解
axios简介
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，它本身具有以下特征：
- 从浏览器中创建XMLHttpRequest
- 从node.js发出http请求
- 支持PromiseAPI
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
引入方式：
$npminstallaxios //使用淘宝源 $cnpminstallaxios //或者使用cdn：
安装其他插件的时候，可以直接在main.js中引入并使用Vue.use()来注册，但是axios并不是vue插件，所以不能使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。
为了解决这个问题，我们在引入axios之后，通过修改原型链，来更方便的使用。
//main.js
importaxiosfrom'axios' Vue.prototype.$http=axios
在main.js中添加了这两行代码之后，就能直接在组件的methods中使用$http命令
methods:{
postData(){
this.$http({
method:'post',
url:'/user',
data:{
name:'xiaoming',
info:'12'
}
})
}
更多的基础知识大家可以参考这篇文章：https://www.nhooo.com/article/110324.htm
vue使用axios实现文件上传进度实时更新
XHR二级增加了progress事件,我们可以据此在浏览器接收新数据期间添加实时数据进度条,从而使得交互更加友好
vue模板
vue-js
varform=newFormData()
form.append('file',vm.$refs.upload.files[0])
form.append('id',id)
form.append('type',type)
varconfig={
onUploadProgress:progressEvent=>{
varcomplete=(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文档)
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。