axios+Vue实现上传文件显示进度功能
一,前言
成都创新互联,为您提供成都网站建设、成都网站制作、网站营销推广、网站开发设计,对服务成都加固等多个行业拥有丰富的网站建设及推广经验。成都创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!
最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了
二,效果
三,代码
HTML代码
上传文件:
{{filename}} +请选择文件上传+
上传进度:
{{(uploadRate*100).toFixed(2)}}%
CSS代码
.input-zone { width: 500px; color: blue; font-size: 14px; position: relative; } .input-zone input[type='file'] { opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; } .progress-wrapper { position: relative; height: 50px; border-radius: 5px; background-color: lightgrey; } .progress-wrapper .progress-progress { position: absolute; left: 0; top: 0; height: 100%; width: 0%; border-radius: 5px; background-color: darkturquoise; z-index: 1; } .progress-wrapper .progress-rate { position: relative; text-align: center; font-size: 14px; line-height: 50px; height: 100%; z-index:2;}
JS代码
var app = new Vue({ el: "#app", data: { uploadRate: 0, filename: '', uploadStyle: { width: '0%' } }, methods: { upload: function (e) { var vm = this; var formData = new FormData(); formData.append("name", "Alax"); for (var i = 0; i < e.target.files.length; i++) { var file = e.target.files[i]; //取第1个文件 formData.append("file", file); vm.filename = file.name; console.log(file); } var config = { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: function (e) { console.log("进度:"); console.log(e); //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量 //如果lengthComputable为false,就获取不到e.total和e.loaded if (e.lengthComputable) { var rate = vm.uploadRate = e.loaded / e.total; //已上传的比例 if (rate < 1) { //这里的进度只能表明文件已经上传到后台,但是后台有没有处理完还不知道 //因此不能直接显示为100%,不然用户会误以为已经上传完毕,关掉浏览器的话就可能导致上传失败 //等响应回来时,再将进度设为100% vm.uploadRate = rate; vm.uploadStyle.width = (rate *100).toFixed(2)+ '%'; } } } }; axios.post("/ajaxPage/VueUpload.aspx?method=upload", formData, config) .then(function (data) { console.log(data); var json = data.data; //后台实际返回的结果 if (json.result) { vm.uploadRate = 1; vm.uploadStyle.width = '100.00%'; } else { alert(json.msg); } }) .catch(function (err) { console.log(err); }); } } })
四,总结
1.其实单文件上传和多文件上传的区别就是 input标签中多了一个属性
multiple="multiple"
2.onuploadprogress 事件中显示上传为100%并不准确,一定要等到响应回来才能认为完成了100%,不然用户此时关闭了浏览器的话,上传就失败了。或者有其它逻辑时,此时点提交,就会导致后台找不到上传的文件路径等问题。
总结
以上所述是小编给大家介绍的axios+Vue实现上传文件显示进度功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
网站名称:axios+Vue实现上传文件显示进度功能
分享地址:http://hbruida.cn/article/jieiis.html