vue项目多文件上传并显示在页面上

最新推荐文章于 2024-07-03 15:25:11 发布

T eoh*

最新推荐文章于 2024-07-03 15:25:11 发布

阅读量692

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45736176/article/details/103618145

本文介绍了一个基于Vue的多文件上传组件实现，包括文件选择、显示文件名与大小、上传状态展示及删除功能。通过监听文件输入框的change事件，动态更新文件列表，并提供了删除按钮以移除待上传的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
　　<label for="file" class=" btn btn-default" style="border:1px solid red">多文件上传</label>
　　<input type="file" style="display:none;" id="file" multiple @change="file()" name="multipartFiles">
　　<table style="width:500px;margin:0 auto;" id="wenjian">
　　　　<tr style="" id="col">
　　　　　　<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" id="tr">
　　　　　　<td>{{dd.name}}</td>
　　　　　　<td>{{(dd.size/1024).toFixed(1)}}kb</td>
　　　　　　<td>等待上传</td>
　　　　　　<td><button @click="del(index)">删除</button></td>
　 　　</tr>
　　</table>
</template>

date(){
　　return{
　　　　wenjian:[],
　　　　isactive:true,
　　　　aaa:'aaaclass'
　　}
}

methods:{
 file(){
      var that = this;
      for(var ff=0;ff<$("#file")[0].files.length;ff++){
        that.wenjian.push($("#file")[0].files[ff])
      }
      that.isactive = false;
      //console.log($("#file")[0].files)
      //console.log(that.wenjian)      
    },
del(index){
      //console.log(111)
      var that = this;
      //console.log(that.wenjian)
      that.wenjian.splice(index,1)
    },
}


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

效果图