element UI上传多文件问题记录

weixin_36982822

已于 2023-07-21 14:39:34 修改

阅读量181

点赞数

文章标签：前端

于 2023-07-11 14:10:15 首次发布

本文链接：https://blog.csdn.net/weixin_36982822/article/details/131658604

版权

使用element UI上传多文件时，多次选择相同文件问题记录@TOC

预期：批量上传不同目录下的不同文件

代码如下

 <el-upload :show-file-list="false" :auto-upload="false" multiple drag :accept="accept" :on-change="changeHandle">
  </el-upload>
  changeHandle(file,fileList){
	console.log(fileList)
   }

异常现象

选择文件后，继续点击上传图标选择相同文件，changeHandle方法中拿到的fileList会是重复的文件列表

尝试方案

给 el-upload添加ref,通过ref拿到input ,直接使用input的files属性拿到FileList对象
此方案虽然不会出现重复文件，但是会出现，如果第一次选择了多个文件，第二次再选一个文件，FileList对象拿到的只是一个文件。即FileList始终是最后一次选择的文件列表

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_36982822

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
element UI上传多文件问题记录

使用element UI上传多文件时，多次选择相同文件问题记录@
复制链接

扫一扫

element同时上传两个文件时，只有一个上传成功或者说on-success只执行一次

weixin_47756693的博客

11-11

2702

解决element同时上传两个文件时，只有一个上传成功解决element同时上传两个文件时，on-success只执行一次

el-upload多选，多次调用上传接口，多选的文件上传用一个标识，并且上传完再提示上传成功

qq_44737178的博客

04-09

2695

问题描述：一次选中多个文件，多次调用上传接口，但是多选的文件上传属于同一批次，后台需要一个uid来区分这是同一批上传的，数据叠加，并且需要选中的所有文件都上传成功了再提示上传成功 ...

1 条评论您还未登录，请先登录后发表或查看评论

解决element-ui中el-upload组件上传多个图片时出现重复图片问题

yht2004123的博客

05-16

3045

使用el-upload在上传图片时，上传多张时，会出现重复问题，原因是on-change在监听文件变化时，是每次选择一个文件就要返回一次调用，例如：选择了两个文件，a.png，b.png就要返回两次，第一次返回[a.png],第二次返回[a.png,b.png]，结果累加就是[a.png,a.png,b.png]，所以会造成重复,需要处理一下，只要最后一次调用。

elementui el-upload一次请求上传多个文件

D浩DzD的博客

06-19

7138

方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传。注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用。使用自定义上传的接口，而不是使用*this.$refs.upload.submit();

【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！

lonelysnowman的博客

12-15

5954

教大家一次请求，上传多个文件。 ElementUI如果是默认方案，上传多张图片并不是真正的一次上传多张，而是发送多次请求，一次请求携带一张图片。

【学习记录21】Vue+ElementUI el-upload多文件上传，一次请求上传多个文件！

wenhui的博客

03-30

7840

前情回顾说点废话。。。1、项目当中遇到需要上传多个图片，一次选取多个图片。但是吧el-upload默认只能一个一个传，每次上传成功还的自己去push，一个一个去判断。2、关键是后台给的接口，要一次性接收一堆，无奈之下只能去网上搜索，大佬们都是给的代码片段无法直接使用。3、闲下来就想着自己写一个吧。大家共同学习进步，我也巩固一下知识点！有问题的地方欢迎各位大佬指正！话不多说直接撸代码！！！

springboot文件上传(支持单个和多个)

01-02

本教程将详细讲解如何在Spring Boot应用中实现单个和多个文件的上传，并处理与系统兼容性和虚拟路径映射相关的问题。首先，我们需要在Spring Boot项目中引入相关依赖。在`pom.xml`文件中添加`spring-boot-starter-...

vue文件管理系统仿百度网盘

11-13

【Vue文件管理系统仿百度网盘】是一个基于Vue.js框架和Element UI组件库开发的应用，旨在模仿百度网盘的文件管理功能。此项目的核心是实现文件的层级展示与下钻操作，以及提供文件的预览和下载功能。让我们深入探讨...

springboot+vue前后端分离实现超大文件分块上传

10-31

本项目通过结合SpringBoot和Vue.js技术栈，实现了大文件的分块上传功能，这在处理GB级别的文件时尤为实用，因为它能有效地避免单一网络连接上传大文件时可能遇到的超时或中断问题。下面我们将详细探讨这一实现方式的...

plupload 实现多文件上传

12-21

本示例是关于如何使用Plupload与JSP和Servlet配合，实现多文件上传功能的详细教程。首先，我们需要了解Plupload的基本结构。Plupload包含前端界面和后端处理两部分。前端界面负责用户交互，如选择文件、显示上传...

vuejs 和 element 搭建的一个后台管理界面

04-02

- `main.js`：应用的入口文件，通常在这里引入Vue、Vue Router和Element UI等库，并初始化Vue实例。 - `.gitignore`：定义Git忽略的文件或目录规则。 5. **开发流程** - 安装依赖：使用npm或yarn安装Vue.js、...

el-upload 防止选择上传重复文件

Admans的专栏

11-14

3472

【代码】el-upload 防止选择上传重复文件。

elementui上传文件不允许重名

weixin_45454859的博客

02-05

1331

elementui上传文件不允许重名

el-upload 多文件上传出现重复问题处理

weixin_39875208的博客

08-20

2586

changeUpload(file,fileList){ if(file.raw.type!=='image/png'&&file.raw.type!=='image/jpg'&&file.raw.type!=='image/jpeg'){ this.$message.error('只支持jpg|png|jpeg格式的文档！') return; } letAllCount...

Vue 使用 ElementUi el-upload 手动上传文件限制同名文件

最新发布

Sept_16R的博客

07-25

134

【代码】Vue 使用 ElementUi el-upload 手动上传文件限制同名文件。

element-plus：el-upload上传文件只能一次，第二次失效

彭世瑜的博客

12-10

4530

以下是官方文档给出的解决示例。来定义超出限制时的行为。，就无法进行第二次上传。

el-upload解决无法二次上传问题

h_未来可期_的博客

01-16

5178

el-upload无法二次上传、二次上传失败

element upload 多文件手动一次性上传文件重复性校验

xionggd

06-24

5901

el upload 组件 <el-upload class="upload-demo" ref="upload" accept=".gif,.PDF" :action="batchImportDwgUrl" :on-change="onChange" :on-remove="onRemove" :file-list="fileList" :auto-upload="false

结合element-ui 的el-upload组件支持分片上传

05-17

Element-UI 的 el-upload 组件本身并不支持分片上传，但是我们可以通过使用第三方库来实现分片上传的功能。一种常见的方案是使用 axios 库来进行文件上传，并在上传时使用 axios 的分片上传功能。axios 库已经内置了分片上传的支持，我们可以使用 axios 的 `axios.post` 方法来上传文件，并使用 `onUploadProgress` 方法来监听上传进度。首先，我们需要在项目中安装 axios 和 element-ui： ``` npm install axios element-ui --save ``` 然后，我们可以在组件中使用 el-upload 组件来上传文件，如下所示： ```html <template> <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :headers="headers" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress" :file-list="fileList" :limit="limit" :multiple="multiple" :data="formData" :auto-upload="autoUpload" :show-file-list="showFileList" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> ``` 其中，我们需要设置 `action` 属性为文件上传的接口地址，同时需要设置 `on-success`、`on-error` 和 `on-progress` 等事件来处理上传成功、上传失败和上传进度。接下来，我们可以在组件的 `mounted` 钩子函数中初始化 axios 并设置分片大小： ```js import axios from 'axios'; export default { name: 'UploadDemo', data() { return { fileList: [], uploadUrl: 'http://example.com/upload', limit: 3, multiple: true, formData: {}, autoUpload: true, showFileList: true, headers: {}, chunkSize: 5 * 1024 * 1024 // 5MB }; }, mounted() { axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; axios.defaults.timeout = 60000; // 超时时间 axios.defaults.retry = 3; // 重试次数 axios.defaults.retryDelay = 1000; // 重试间隔 // 设置分片大小 axios.defaults.maxContentLength = this.chunkSize; axios.defaults.maxBodyLength = this.chunkSize; }, methods: { // 上传文件 handleUpload(file) { const formData = new FormData(); formData.append('file', file); return axios.post(this.uploadUrl, formData, { headers: this.headers, onUploadProgress: progressEvent => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(percentCompleted); } }); }, // 上传成功回调 handleSuccess(response, file, fileList) { console.log('上传成功:', response); }, // 上传失败回调 handleError(error, file, fileList) { console.log('上传失败:', error); }, // 上传进度回调 handleProgress(event, file, fileList) { console.log('上传进度:', event.percent); } } }; ``` 在 `handleUpload` 方法中，我们使用 axios 的 `post` 方法来上传文件，并设置了 `onUploadProgress` 方法来监听上传进度。在 `mounted` 钩子函数中，我们设置了 axios 的默认参数，包括超时时间、重试次数、重试间隔和分片大小等。需要注意的是，由于 el-upload 组件不支持分片上传，因此我们需要手动控制上传的文件数量，以避免同时上传过多的文件导致服务器崩溃。我们可以通过设置 `limit` 属性来控制上传的文件数量，例如设置为 3 表示一次最多只能上传 3 个文件。另外，如果需要支持断点续传，我们需要在上传文件时记录已上传的文件块数量和位置，并在下次上传时从上次的位置继续上传。这部分内容比较复杂，需要根据具体的需求来实现，这里不再赘述。