您好,登錄后才能下訂單哦!
一,前言
最近在用Vue,然后上傳文件時(shí)需要顯示進(jìn)度,于是網(wǎng)上搜了一下,經(jīng)過自己實(shí)測(cè)終于也弄明白了
二,效果
三,代碼
HTML代碼
<div id="app"> <h5>上傳文件:</h5> <p class="input-zone"> <span v-if="filename">{{filename}}</span> <span v-else>+請(qǐng)選擇文件上傳+</span> <input type="file" name="file" value="" placeholder="請(qǐng)選擇文件" @change="upload" multiple="multiple" /> </p> <p>上傳進(jìn)度:</p> <div class="progress-wrapper"> <div class="progress-progress" :></div> <div class="progress-rate">{{(uploadRate*100).toFixed(2)}}%</div> </div> </div>
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個(gè)文件 formData.append("file", file); vm.filename = file.name; console.log(file); } var config = { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: function (e) { console.log("進(jìn)度:"); console.log(e); //屬性lengthComputable主要表明總共需要完成的工作量和已經(jīng)完成的工作是否可以被測(cè)量 //如果lengthComputable為false,就獲取不到e.total和e.loaded if (e.lengthComputable) { var rate = vm.uploadRate = e.loaded / e.total; //已上傳的比例 if (rate < 1) { //這里的進(jìn)度只能表明文件已經(jīng)上傳到后臺(tái),但是后臺(tái)有沒有處理完還不知道 //因此不能直接顯示為100%,不然用戶會(huì)誤以為已經(jīng)上傳完畢,關(guān)掉瀏覽器的話就可能導(dǎo)致上傳失敗 //等響應(yīng)回來時(shí),再將進(jìn)度設(shè)為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; //后臺(tái)實(shí)際返回的結(jié)果 if (json.result) { vm.uploadRate = 1; vm.uploadStyle.width = '100.00%'; } else { alert(json.msg); } }) .catch(function (err) { console.log(err); }); } } })
四,總結(jié)
1.其實(shí)單文件上傳和多文件上傳的區(qū)別就是 input標(biāo)簽中多了一個(gè)屬性
multiple="multiple"
2.onuploadprogress 事件中顯示上傳為100%并不準(zhǔn)確,一定要等到響應(yīng)回來才能認(rèn)為完成了100%,不然用戶此時(shí)關(guān)閉了瀏覽器的話,上傳就失敗了?;蛘哂衅渌壿嫊r(shí),此時(shí)點(diǎn)提交,就會(huì)導(dǎo)致后臺(tái)找不到上傳的文件路徑等問題。
總結(jié)
以上所述是小編給大家介紹的axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。