溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一,前言
最近在用Vue，然后上傳文件時需要顯示進度，于是網上搜了一下，經過自己實測終于也弄明白了
二，效果
三，代碼
HTML代碼
<div id="app">
<h5>上傳文件：</h5>
<p class="input-zone">
<span v-if="filename">{{filename}}</span>
<span v-else>+請選擇文件上傳+</span>
<input type="file" name="file" value="" placeholder="請選擇文件" @change="upload" multiple="multiple" />
</p>
<p>上傳進度：</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個文件
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實現上傳文件顯示進度功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
