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.name}}</td>
        <td>{{(dd.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 = $("#file")[0].files;
      that.isactive = false;
    }
}

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

试一试吧！

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

原文地址：https://www.cnblogs.com/teoh/p/11512449.html