axios+Vue上传文件显示进度

一  前言

最近在用Vue，然后上传文件时需要显示进度，于是网上搜了一下，经过自己实测终于也弄明白了

二  效果

 

三  代码

HTML代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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>上传进度：</p>    <div  class="progress-wrapper">        <div class="progress-progress" :style="uploadStyle"></div>        <div class="progress-rate">{ {(uploadRate*100).toFixed(2)}}%</div>    </div> </div> </