el-upload 同名文件多次选择上传失败了，第一次触发请求，后面不触发请求了

已于 2023-03-18 21:22:54 修改
阅读量584 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： elementui 前端 经验分享
于 2022-09-25 22:54:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/array__/article/details/127044918

el-upload 同名文件多次选择上传失败了，第一次触发请求，后面不触发请求了

37f3fec41d69490d8a8e4e96c3deb2c5.png

当选择多文件上传时，因为fileList被手动改变了，handleSuccess只会触发一次，this.listFile只有一个文件
ec01aea45909458ba1d756aeeb4f474a.png 

 

jsPao
关注
【学习记录21】Vue+ElementUI el-upload多文件上传，一次请求上传多个文件！
wenhui的博客
03-30 8414
前情回顾说点废话。。。1、项目当中遇到需要上传多个图片，一次选取多个图片。但是吧el-upload默认只能一个一个传，每次上传成功还的自己去push，一个一个去判断。2、关键是后台给的接口，要一次性接收一堆，无奈之下只能去网上搜索，大佬们都是给的代码片段无法直接使用。3、闲下来就想着自己写一个吧。大家共同学习进步，我也巩固一下知识点！有问题的地方欢迎各位大佬指正！话不多说直接撸代码！！！
（vue3）el-upload请求时，第一次没有触发请求，第二次触发请求（我的是俩个接口第一个请求文件，第二个为解析文件）的报错
qq_48642226的博客
06-17 2507
在请求方法里面把on-success方法放在你判断成功请求里面 this.onSuccess()就可以调用此方法了 上传完文件，解析部分我用是on-success方法： 这里还可以说一下上传路径第一次获取不到的问题，使用下面的方法 这个是在on-change方法里面定义的 此文章仅作为笔记...
前端vue项目中上传文件时无法上传与上一次相同的文件，使用el-upload解决方法
Z_Joker_J的博客
06-05 3496
需求是：上传文件 前提是：上传文件的接口IP是不固定的。因此不能写死。 第一次解决方法： 使用h5自带的input type=file时，使用change触发上传事件 <input class="exportss" type="file" id="fileExport" @change="handleFileChange" ref="inputer"> const inputDOM = this.$refs.inputer this.file = inputDO
el-upload标签文件一次提交多次重复上传无反应问题
m0_67098662的博客
06-06 2121
el-upload标签文件一次提交多次重复上传无反应问题解决方案
(实战-改bug)element ui Upload组件 上传一次后，再次点击上传 没反应
m0_67066313的博客
10-08 2957
日常改bug，减少出错率
第十六篇 难点突破之 Vue 中使用 ElementUi el-upload 进行手动上传文件 限制上传文件类型 大小 同名等进行限制
Yzt_199626的博客
06-06 5987
个人在做文件上传功能的时候，踩过不少的坑，特在此记录下，方便后续的查阅，也帮助有需要的朋友查阅。 实现的功能有：文件类型上传类型限制、文件大小限制、文件总大小限制、文件
el-upload上传不了同名文件
04-09
当用户尝试上传同一名字的文件时，某些情况下会发现第二次选择相同文件后并未触发新的上传请求。这主要是由于浏览器对于输入框 `<input type="file">` 的行为所致——如果两次选择的是同一个文件，则不会触发 change...
element-ui 文件上传修改文件名的方法示例
10-16
Element-UI 的文件上传组件 (`el-upload`) 提供了丰富的自定义功能，但默认情况下并不支持直接修改上传文件的名称。这个问题在实际开发中可能会引发数据冲突，例如在静态资源服务器上出现同名文件覆盖的问题。 首先...
vue3 el-upload on-change方法里校验限制文件上传类型，不满足的不在文件列表中展示
07-12
我们有一个明确的需求：在Vue3中使用Element Plus的el-upload组件，在on-change事件中校验文件类型，如果不符合条件则不显示在文件列表中。 根据引用[5]中的示例，我们看到在Vue2中可以通过在on-change事件中操作...
el-upload拖入多个文件重复提交
01-15
### 解决 `el-upload` 组件多文件拖拽时重复上传问题 当使用 `el-upload` 组件处理多文件拖拽操作时，可能会遇到重复提交的问题。这通常是因为每次触发拖拽事件都会重新调用 `onChange` 方法，而该方法默认会将新...
解决上传文件或图片时选择相同文件无法触发change事件的问题
weixin_33757609的博客
04-21 389
昨天在做一个上传文件的模块时遇到了这样的问题：打开文件一上传，上传成功后再次点击文件一，change事件无反应 <input type="file" name="file" class="file-input" @change="setFile" /> 在网上查了一番发现，当第一次选择文件一上传时，存放的文件由空变成了文件一，上传成功后，再次选择文件一，此时就相当于没有ch...
解决element-ui中el-upload组件上传多个图片时出现重复图片问题
yht2004123的博客
05-16 3988
使用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 7634
方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传。注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用。使用自定义上传的接口，而不是使用*this.$refs.upload.submit();
el-upload中on-change在上传多个文件多次调用解决方法
热门推荐
dafadafahao的博客
11-05 1万+
最近在做项目的过程中，有一个场景需要使用el-upload在用户选择完图片之后立即执行上传操作。这个上传用的是本地的方法不是用el的自动上传 监听用户选择文件的事件只有一个on-change，具体见文档说明： 由于开启了文件可多选multiple，发现用户从本地选择了n个文件的话on-change就会执行n次。因此图片上传请求也就执行了n次。 el-upload部分代码 解决 将请求放到任务队列的最后面，先确定上传了几个文件，再执行请求 看代码可知，在this中设置了一个控制上传的长度maxFileL
解决ElementUI中Upload组件单个文件替换及未选择文件不能触发submit方法
前端开发
03-10 6869
1、解决ElementUI中Upload组件上传单个文件时内容替换 2、解决自定义上传时未选择文件时不能触发submit提交
在vue2中，使用el-upload组件进行批量上传时，使用了limit进行限制，第一次上传了limit个文件后，无法再次上传问题处理
2301_77084596的博客
08-23 1340
使用this.$refs.upload.clearFiles()解除限制失败的原因：这里的el-upload上传时使用http-request进行自定义上传，在使用http-request进行上传时on-error、on-success失效了，无法执行，当然在http-request对应的自定义上传事件中也尝试过，失败。在使用el-upload二次封装的组件进行自定义批量上传时，每次上传文件时进行了limit限制:limit='30'，当第一次批量上传了limit数量的文件后，无法二次进行上传。
在vue中，使用el-upload组件，完成多个文件，一次请求批量上传
西装暴徒_12138的博客
04-07 2536
【代码】在vue中，使用el-upload组件，完成多个文件，一次请求批量上传。
el-upload 同名文件不能上传效果
josiecici的博客
10-15 1917
// 数组去重 uniqueArr(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i].name == arr[j].name) { this.$message.warning("不支持同名文件上传"); arr.splice(j, 1);...
el-upload点击事件不在el-upload中如何触发选文件
最新发布
07-16
<think>首先，用户的问题是关于Element UI的el-upload组件：如何在不直接点击el-upload组件的情况下触发文件选择对话框。具体来说，用户想知道当点击事件不在el-upload组件中时，如何触发文件选择功能。 我需要参考提供的引用内容。这些引用来自之前的回答或参考资料： - 引用[1]：提到在element-plus中，通过其他位置的点击触发文件选择功能。它使用了一个方法：`uploadInstance.value.$el.querySelector('input').click()`，并通过`defineExpose`暴露这个方法。 - 引用[2]：讨论了在el-upload中使用el-button时触发上传事件的问题，并通过添加`@click.stop`来阻止事件传播。 - 引用[3]：提到拆解el-upload组件时遇到文档不足的问题。 - 引用[4]：在vue2 + elementUI中，通过一个隐藏的el-upload组件，并在外部按钮上调用其方法来触发文件选择。 用户的问题核心是：如何从外部触发el-upload的文件选择对话框。 基于引用，我可以总结出几种方法： 1. **使用querySelector查找input元素并触发click事件**：如引用[1]所示，el-upload组件内部有一个input元素用于文件选择。通过获取这个input元素并调用其click方法，可以触发文件选择对话框。 2. **通过ref访问el-upload组件的实例**：如引用[4]所示，使用ref（在vue2中是`this.$refs.upload`）来访问el-upload实例，然后调用其方法。在element-ui中，el-upload组件有一个`$el`属性，可以访问DOM元素。 3. **阻止事件传播**：如引用[2]所示，如果外部按钮在el-upload内部，可能需要阻止事件传播以避免意外行为。但用户的问题是外部触发，所以这个可能不是直接相关，但可以提到以避免问题。 4. **隐藏el-upload并使用外部按钮触发**：如引用[4]所示，将el-upload组件隐藏（例如，display:none），然后通过外部按钮调用其文件选择功能。 现在，构建我的回答： - 回答结构清晰：逐步解释方法。 - 使用中文。 - 确保LaTeX语法正确（但在这个上下文中，可能没有太多数学表达式，所以主要关注代码块）。 - 生成相关问题。 - 在回答末尾添加引用标识。 回答结构： 1. **介绍问题**：简要解释用户的问题。 2. **解决方案**：分步骤解释如何实现外部触发文件选择对话框。 - 方法1：使用ref和querySelector（基于引用[1]和[4]）。 - 方法2：直接调用el-upload的方法（如果可用）。 - 注意事项：如阻止事件传播等。 3. **代码示例**：提供vue代码示例。 4. **总结**：简要强调关键点。 5. **相关问题**：生成几个相关问题。 生成相关问题： - 基于主题，如优化、常见问题、其他组件等。 - 例如： 1. 如何自定义el-upload的上传行为？ 2. 如何处理el-upload的文件上传成功事件？ 3. Element UI中el-upload的常见错误有哪些？ 最后，添加引用标识：在回答中引用的地方末尾添加[^1], [^2]等。</think>### 如何通过外部按钮触发 el-upload 的文件选择功能 在使用 Element UI 的 `el-upload` 组件时，有时需要从外部元素（如自定义按钮）触发文件选择对话框，而不是直接点击 `el-upload` 内部的按钮。以下是两种可靠的方法，基于 Element UI 的实现原理和最佳实践。核心思路是：**通过 Vue 的 `ref` 获取 `el-upload` 实例，并手动触发其内部的 `<input>` 元素的 `click` 事件**，因为 `el-upload` 的文件选择功能本质是由一个隐藏的 `<input type="file">` 元素实现的[^1][^3]。 #### 方法 1：使用 `ref` 和 `querySelector`（推荐） 这是最直接的方式，适用于 Vue 2 + Element UI 或 Vue 3 + Element Plus。步骤如下： 1. **为 `el-upload` 添加 `ref` 属性**：用于在 Vue 中引用组件实例。 2. **在外部按钮的点击事件中触发文件选择**：通过 `ref` 获取 `el-upload` 的根元素，然后用 `querySelector` 查找内部的 `<input>` 元素并调用其 `click()` 方法。 3. **隐藏 `el-upload` 的默认按钮**：通过 CSS 隐藏 `el-upload` 自带的按钮，避免 UI 重复。 ```vue <template> <!-- 外部按钮 --> <el-button @click="triggerFileSelect">外部按钮触发文件选择</el-button> <!-- 隐藏的 el-upload 组件 --> <el-upload ref="uploadRef" action="/api/upload" // 替换为你的上传接口 :auto-upload="false" // 可选：关闭自动上传，手动控制 style="display: none" // 隐藏组件 > <!-- 默认按钮被隐藏 --> </el-upload> </template> <script> export default { methods: { triggerFileSelect() { // 通过 ref 获取 el-upload 实例，触发内部 input 的 click 事件 const uploadInstance = this.$refs.uploadRef; if (uploadInstance) { const inputElement = uploadInstance.$el.querySelector('input[type="file"]'); if (inputElement) { inputElement.click(); // 触发文件选择对话框 } } } } } </script> ``` - **原理**：`el-upload` 组件内部封装了一个 `<input type="file">` 元素，手动触发其 `click` 事件等同于点击上传按钮[^1][^4]。 - **注意事项**： - 如果 `el-upload` 包含多个按钮（如选择文件和上传按钮），使用 `@click.stop` 阻止事件冒泡，避免冲突[^2]。 - 在 Vue 3 + Element Plus 中，语法类似，但需使用 `uploadRef.value` 访问实例。 #### 方法 2：通过 `ref` 暴露方法（适用于组件封装） 如果需要跨组件调用，可以在 `el-upload` 的父组件中暴露一个方法： ```vue <template> <el-button @click="handleExternalClick">外部按钮</el-button> <el-upload ref="uploadRef" ... /> </template> <script> export default { methods: { handleExternalClick() { this.$refs.uploadRef.$el.querySelector('input').click(); }, // 可选：暴露方法给其他组件 exposeSelectMethod() { return { select: this.handleExternalClick }; } } } </script> ``` #### 常见问题解决 - **事件冒泡问题**：如果外部按钮嵌套在 `el-upload` 内，添加 `@click.stop` 修饰符（例如 `<el-button @click.stop="..."`）避免触发上传事件[^2]。 - **兼容性**：以上方法在 Element UI 2.x 和 Element Plus 中均有效，底层实现一致[^3][^4]。 - **文件上传控制**：设置 `:auto-upload="false"` 可手动处理上传逻辑（如在上传前验证文件）。 通过以上方法，您可以灵活地从任意位置触发文件选择功能，提升用户体验[^1][^4]。 ### 相关问题 1. 如何自定义 `el-upload` 的上传请求（如添加 token 或修改请求头）? 2. `el-upload` 组件如何处理文件上传失败或超时? 3. 在 Element UI 中，如何限制 `el-upload` 的文件类型和大小? 4. 如何实现 `el-upload` 的多文件上传和进度条显示? [^1]: element-plus 中通过 `querySelector` 触发文件选择功能。 [^2]: 使用 `@click.stop` 阻止事件冒泡避免冲突。 [^3]: `el-upload` 组件内部封装了 `<input>` 元素实现文件选择。 [^4]: Vue 2 + Element UI 中通过隐藏 `el-upload` 并外部触发的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值