axios实现文件上传并获取进度
更新时间：2020年03月25日 14:21:45 作者：九段刀客
这篇文章主要为大家详细介绍了axios实现文件上传并获取进度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了axios实现文件上传并获取进度的具体代码，供大家参考，具体内容如下
实现效果
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input @change="change" type="file">
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/axios.js"></script>
<script>
new Vue({
el: '#app',
data: {
val: ''
},
methods: {
change(e) {
let files = e.target.files
// 上传部分
let url = ' ' //你的后台上传地址
let data = new FormData()
data.append('file', files[0])
axios({
url,
method: 'post',
data,
headers: {
},
//原生获取上传进度的事件
onUploadProgress:function(progressEvent){
let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
console.log('上传 ' + complete)
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近学习一下前端框架Vue,整体上感觉还是比较有意思的,但是在安装vue-cli脚手架的时候,出现了一些问题,解决问题也花费了不少时间,下面这篇文章主要给大家介绍了关于解决vue终端报错:不是内部或外部命令的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue.js常用指令的使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了vue结合AntV G2的使用踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了Vue预览图片和视频的几种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
vue中created、watch和computed的执行顺序详解
由于vue的双向数据绑定,自动更新数据的机制,在数据变化后,对此数据依赖 的所有数据,watch事件都会被更新、触发,下面这篇文章主要给大家介绍了关于vue中created、watch和computed的执行顺序,需要的朋友可以参考下2022-11-11
vue3 Error:Unknown variable dynamic import: ../views/的解
这篇文章主要给大家介绍了关于vue3 Error:Unknown variable dynamic import: ../views/的解决方案,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
下面小编就为大家分享一篇Vue.js+Layer表格数据绑定与实现更新的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue跳转外部链接始终有localhost的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了关于antd-vue a-menu菜单绑定路由的相关问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现简单图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
最新评论