上传文件及Excel表格

最新推荐文章于 2022-08-06 23:53:03 发布

桃花树下种桃花

最新推荐文章于 2022-08-06 23:53:03 发布

阅读量225

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/var_let_const/article/details/124703600

版权

这篇博客探讨了两种不同的文件上传方式：一种是原生的HTML输入元素`<input type='file'>`用于上传文件夹，另一种是使用Element+Vue的组件实现Excel表格的上传。通过`@change`事件获取文件列表，并对上传过程进行了详细说明，特别是针对Excel文件的处理。文章着重比较了这两种组件在实际应用中的优缺点和适用场景。

摘要由CSDN通过智能技术生成

上传文件夹用的是原生组件

<input ref="fileRef" type="file" name="file" webkitdirectory @change.stop="change">




change() {
  console.log(this.$refs.fileRef.files)// 文件列表
},

上传excel表格用的是element+vue

<el-upload
   class="upload-demo"
   drag
   action=""
   accept=".xlsx, .xls"
   :auto-upload="false"
   :show-file-list="false"
   :on-change="handle"
 >
    <i class="el-icon-upload" />
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">只能上传xlsx,xls格式的表格</div>
</el-upload>


handle(data, key) {
   console.log(data.raw)
}