vue之上傳進度 · 前端技術總結

這個上傳進度是通知XMLHttpRequest的upload.onprogress事件來監聽的，代碼如下 ~~~ var xhr = XMLHttpRequest(); xhr.upload.onprogress = function(e) { var loaded = e.loaded, total = e.total, progress = Math.floor(loaded/total*100); console.log(progress); } ~~~ 示例效果 ![](https://box.kancloud.cn/39b78513b7ebd99e51ca484c68b495fd_340x392.gif) 代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上傳</title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <fieldset style="float: left;"> <legend>上傳</legend> <input type="file" name="avatar" v-on:change="selectedShow"> <button type="button" v-on:click="upload">上傳</button> <div v-show="progressShow"> <progress v-model="progress" max="100"></progress> <div>{{ loaded }} / {{ total }}</div> <ul> <li v-for="item in imgInfo">{{ item.name }} : {{ item.value | default }}</li> </ul> </div> </fieldset> <img style="display: block;clear: both;" v-bind:src="imgSrc" alt=""> </div> <script> var app = new Vue({ el: '#app', data: { loaded: 0, // 已上傳大小 total: 0, // 總大小 progress: 0, // 上傳進度 imgSrc: '', // 圖片src imgFile: '', // 圖片文件 imgInfo: [], // 圖片信息 progressShow: false // 是否顯示進度條 }, filters: { default: function(v) { if(v!==undefined && v==='') { return '--'; } else { return v; } } }, methods: { // 選擇圖片顯示 selectedShow: function(e) { this.imgFile = e.target.files[0]; this.imgSrc = window.URL.createObjectURL(this.imgFile); }, // 上傳 upload: function() { this.imgInfo = []; this.loaded = 0; this.total = 0; this.progress = 0; if(this.imgFile) { // FormData var formData = new FormData(); formData.append('avatar', this.imgFile); var xhr = new XMLHttpRequest(); xhr.responseType = 'json'; // 狀態改變事件 xhr.onreadystatechange = function() { if(xhr.readyState===4 && xhr.status===200) { var data = xhr.response; console.log(data); this.imgInfo.push({ "name": "名稱", "value": data.name }); this.imgInfo.push({ "name": "類型", "value": data.type }); this.imgInfo.push({ "name": "尺寸", "value": data.size }); } }.bind(this); // 進度事件 xhr.upload.onprogress = function(e) { this.progressShow = true; var loaded = e.loaded, total = e.total, progress = Math.floor(loaded/total*100); this.loaded = loaded; this.total = total; this.progress = progress; }.bind(this); xhr.open('post', 'demo.php'); xhr.send(formData); } else { alert('請先選擇圖片文件~'); } } } }); </script> </body> </html> ~~~ 對應的demo.php代碼 ~~~ <?php $avatar = $_FILES['avatar']; echo json_encode($avatar); ~~~ 附加 FormData的介紹 https://segmentfault.com/a/1190000006716454