axios实现文件上传并获取进度
2019-10-13 07:05
3707 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- axios+Vue实现上传文件显示进度功能
- jQuery与Servlet实现文件上传与获取上传进度
- vue使用axios实现文件上传进度的实时更新详解
- Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
- Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
- axios实现文件上传并显示上传进度,并且在上传过程中可以进行手动取消
- Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
- AJAX+JSP实现基于WEB的文件上传的进度控制,作者:刘作晨
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
- AJAX实现基于WEB的文件上传的进度控制
- Struts2.0实现上传文件进度条
- 使用libcurl实现获取目标文件大小, 下载进度显示, 断点续传等功能
- struts2+ckeditor+ckfinder实现文件的上传、从数据库获取数据、修改并提交到数据库中保存
- PHP+FLASH实现上传文件进度条相关文件 下载
- PHP 大文件上传进度条实现
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)
- HTML5上传文件显示进度的实现代码
- jquery.uploadify插件与java web的结合实现多文件上传+进度条
- 利用jsp+Extjs实现动态显示文件上传进度
- struts2:上传多个文件时实现带进度条、进度详细信息的示范