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

Posted 2022-10-19 teoh

先上代码

<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。