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，等我后續更新...

點我看后續更新