vue 上传的文件以表格形式显示，但是第二个文件覆盖第一个怎么改？

Question

vue 上传的文件以表格形式显示，但是第二个文件覆盖第一个怎么改？

相关代码

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

文件名	大小	状态	操作
{{dd.name}}	{{(dd.size/1024).toFixed(1)}}kb	等待上传	<button>删除</button>

` ` 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> ` ### 你期待的结果是什么？ 图片描述 [1]: /img/bVbxNlS

Answer 1

你每次重新上传文件，都运行that.wenjian = $("#file")[0].files;，在这里把wenjian的值给重置了，你应该是往里追加

that.wenjian = that.wenjian.concat($("#file")[0].files);

另外，你可以在表格中加入删除按钮，删除对应下标的文件

Answer 2

问题上的代码不太清楚，重新写一下

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

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


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>