vue 上传文件 并以表格形式显示在页面上
先上代码
<label for="file" class="btn">多文件上传</label> <input type="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,等我后续更新...