vue Element Ui Upload 上传点击一个按钮，选择多个文件后直接上传，使用防抖解决多次上传的问题。

我家媳妇儿萌哒哒

已于 2025-03-04 09:38:19 修改

阅读量1.3k

点赞数 9

分类专栏： vue element UI 文章标签： vue.js 前端 javascript

于 2025-01-04 15:00:46 首次发布

本文链接：https://blog.csdn.net/qq_44146522/article/details/144930026

版权

问题：

在使用Element Ui Upload 上传文件时，选择多个文件上传时，on-change事件会一个一个返回上传的文件，导致前端不知道什么时候可以拿到全部上传的文件，再一起调后台接口。

解决方法：

上传文件后，自动把文件传给后台，这里做了一个防抖，等待500ms后在传给后台

代码实现：

data() {

return {

fileList: [], //正式pdf文件

timer: null,//防抖

}

}

 <el-upload class="upload-demo" ref="enclosureUpload" accept=".docx" :file-list="fileList" action multiple  :limit="7"
        :show-file-list="false" :auto-upload="false" :on-change="handleFileChange"
        :on-exceed="handleExceed" >
        <el-button type="info" size="small" plain round >
          上传
      </el-button>
  </el-upload>