axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能

更新時間：2019年04月14日 10:00:21 作者：越笨越愛

這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

一,前言

最近在用Vue，然后上傳文件時需要顯示進(jìn)度，于是網(wǎng)上搜了一下，經(jīng)過自己實(shí)測終于也弄明白了

二，效果

三，代碼

HTML代碼

<div id="app">
<h4>上傳文件：</h4>
   <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>上傳進(jìn)度：</p>
   <div class="progress-wrapper">
    <div class="progress-progress" :style="uploadStyle"></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("進(jìn)度：");
       console.log(e);
       //屬性lengthComputable主要表明總共需要完成的工作量和已經(jīng)完成的工作是否可以被測量
       //如果lengthComputable為false，就獲取不到e.total和e.loaded
       if (e.lengthComputable) {
        var rate = vm.uploadRate = e.loaded / e.total; //已上傳的比例
        if (rate < 1) {
         //這里的進(jìn)度只能表明文件已經(jīng)上傳到后臺，但是后臺有沒有處理完還不知道
         //因此不能直接顯示為100%，不然用戶會誤以為已經(jīng)上傳完畢，關(guān)掉瀏覽器的話就可能導(dǎo)致上傳失敗
         //等響應(yīng)回來時，再將進(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; //后臺實(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)簽中多了一個屬性

multiple="multiple"

2.onuploadprogress 事件中顯示上傳為100%并不準(zhǔn)確，一定要等到響應(yīng)回來才能認(rèn)為完成了100%，不然用戶此時關(guān)閉了瀏覽器的話，上傳就失敗了?；蛘哂衅渌壿嫊r，此時點(diǎn)提交，就會導(dǎo)致后臺找不到上傳的文件路徑等問題。

總結(jié)

以上所述是小編給大家介紹的axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: