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=' http :/lib/vue。js '/script script src=' http :/lib/axios。js '/script script new Vue({ El : ' # app '，data: { val: '' })，methods : { change(e){ let files=e . target。文件/上传部分让url=' ' //你的后台上传地址let data=new FormData()数据。追加('文件'，文件[0]) axios({ url，method: 'post '，数据，headers: { }，//原生获取上传进度的事件onuploaddprogress :函数(进度事件){ let complete=(进度事件。已加载/进度事件。总计* 100 | 0)“%”控制台。日志('上传完成)} })。然后(res={ console.log(res) }).catch(err={ console。log(err)})} })/script/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。