一，前言

最近在用Vue，然后上传文件时需要显示进度，于是网上搜了一下，经过自己实测终于也弄明白了

二，效果

三，代码

超文本标记语言代码

div id='app'h4上传文件：/H4 p class=' input-zone ' span v-if=' filename“{ filename } }/span span v-else请选择文件上传/span输入类型=“文件”名称=“文件”值占位符='请选择文件@ change=' upload ' multiple=' multiple '/p/p上传进度：/p div class=' progress-wrapper ' div class=' progress-progress ' : style=' upload style '/div class=' progress-rate ' { upload rate * 100 } .toFixed(2)} } %/div/div CSS代码。输入区{宽度： 500像素颜色：蓝色；font-size : 14px相对位置：} .输入区域输入[类型=' file ']{ opa city 3360 0；宽度： 100%;高度： 100%;绝对位置：左： 0；top : 0；z-index : 2；} .progress-wrapper {位置：相对；高度： 50px边界半径： 5px背景-颜色：浅灰色；} .进度包装器进度-进度{位置：绝对；左： 0；top : 0；高度： 100%;宽度： 0%;边界半径： 5px背景色：深绿松石；z-index : 1；} .进度包装器。进度率{位置：相对；文本对齐：中心；font-size : 14px线高： 50px高度： 100%;z索引：2;}JS代码

var app=new Vue({ el: '#app '，data: { uploadRate: 0，filename: ' '，upload style : { width : ' 0% ' })，方法： { upload : function(e){ var VM=this；var formData=new formData()；formData.append('name '，' Alax ')；for(var I=0；即目标。文件。长度；I){ var file=e . target。文件[I]；//取第一个文件formData.append('file '，file)；虚拟机。文件名=文件。姓名；console.log(文件);} var config={ header RS : { ' Content-Type ' : ' multipart/form-data ' }，onUploadProgress:函数{ console.log('进度：');控制台。日志(e)；//属性长度可计算主要表明总共需要完成的工作量和已经完成的工作是否可以被测量//如果长度可计算为假的，就获取不到e。合计和如果(长度可计算){变化率=虚拟机，则加载。上传速率=e . loaded/e . total；//已上传的比例如果(速率1) { //这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道//因此不能直接显示为100%,不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败//等响应回来时，再将进度设为100% vm.uploadRate=速率；vm.uploadStyle.width=(速率*100)。toFixed(2)" % "；} } } };axios。post('/AJaxpage/vueupLoad。aspx？方法=上传表单数据，配置).然后（函数（数据){ console.log(数据);data.data//后台实际返回的结果if(JSON。结果){ VM。upload rate=1；虚拟机。uploadstyle。宽度=' 100.00% '；} else { alert(JSON)。味精)；} }) .catch(函数(err)){ console。日志(err)；});} } }) 四，总结

1.其实单文件上传和多文件上传的区别就是投入标签中多了一个属性

多重='多重'

2 .onuploaddprogress事件中显示上传为100%并不准确，一定要等到响应回来才能认为完成了100%,不然用户此时关闭了浏览器的话，上传就失败了。或者有其它逻辑时，此时点提交，就会导致后台找不到上传的文件路径等问题。

总结

以上所述是小编给大家介绍的axios Vue实现上传文件显示进度功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！