vue 上传文件 并以表格形式显示在页面上

先上代码

<label for="file" class="btn">多文件上传</label>
<input type="file" style="display:none;" id="file" multiple @change="file()">

这是上传文件的按钮

<table>
    <tr>
        <th class="name">文件名</th>
        <th class="size">大小</th>
        <th class="zhuangtai">状态</th>
        <th>操作</th>
    </tr>
    <tr :class="isactive?aaa:''" v-for="(dd,index) in wenjian" :key="index">
        <td>{{dd[0].name}}</td>
        <td>{{(dd[0].size/1024).toFixed(1)}}kb</td>
        <td>等待上传</td>
        <td><button>删除</button></td>
    </tr>
</table>    

这是显示在页面上的表格

 data () {
    return {
      wenjian:[],
      isactive:true,
      aaa:'aaaclass'
    }
  }

 methods:{
    file(){
      //console.log($("#file")[0].files[0])
      var that = this;
　　　 that.wenjian = that.wenjian.concat($("#file")[0].files);
      that.isactive = false;
    }
}

<style>
　　.aaaclass{
    　　display:none;
    　　}
</style>

试一试吧！

这些代码的前提是在vue中引入jquery。

这个例子还有点小bug，等我后续更新...

点我看后续更新