element-ui upload 组件 手动多次出发 submit

最新推荐文章于 2024-11-04 16:54:23 发布
原创 最新推荐文章于 2024-11-04 16:54:23 发布 · 919 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

文章讲述了在使用ElementUI的upload组件上传文件成功后，如何通过修改文件列表中单个文件的状态（将其设为ready）来允许重新触发submit函数，以便实现多次上传。

element 上传组件 upload 上传成功以后，想重新 调用 submit()函数，发现是不可以进行多次触发的,。

直接上解决方法，在上传成功后的钩子函数里添加:fileList[0l.status ='ready

fileList是文件列表，status是单文件的状态改成ready就能再次上传

element-ui upload组件 实现多文件上传
黑山老妖的小站
12-04 7106
需求：我司要求实现多文件上传，且要求使用formData传递参数。 环境：vue+element-ui+axios 实现： 1. 使用element-ui upload组件搭建上传文件页面，页面示例如下： 代码如下： <template> <div> <el-upload :multiple="true" class="uploa...
element-ui upload组件手动上传 , 一次请求多张图片合并上传到PHP后台
qq_35715551的博客
07-27 612
默认它是多张图片多次请求,但我后台只收到了最后一张,因为我是个大白, 但我确定后台代码没错的.然后去搜,但搜到的答案都是一模一样的,而且我还是只接收到最后一张.废话不多,直接上代码吧 1, 设置 :自动上传:auto-upload="false",覆盖默认行为: http-request="coverUpload" 说明一下: http-request是在触发(this.$refs.upload.submit())上传后调用的 2,定义一个变量 3,定义覆盖函数以及上传,请注...
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
Aotman_的博客
07-16 3211
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
element-ui el-upload 组件在文件上传时发起多次请求_解决办法
weixin_42452567的博客
06-04 6440
通过 http-request 可以覆盖默认的上传行为，可以自定义上传的实现。 当 submit() 之后，要清空文件 clearFiles()，否则会发起多次请求！
element Upload 上传文件只能上传一次 ，再次点击上传无反应的问题的坑
酱子
09-07 9588
element Upload 上传文件只能上传一次 ，再次点击上传无反应的问题的坑 今天在开发的时候,文件上传都没有问题,但是修改文件数据后,再次上传图片就无反应了，导致整个问题的原因是因为你没有清除当前 fileList，导致它一直保存这你第一次上传文件的信息，只要你把他一刀切掉就好了！ 那么问题来了，应该怎么清除呢！所以要想继续上传文件，就需要在on-success钩子函数中通过ef 拿到它的document元素进行清除已经上传的文件 看下面的代码： <el-upload class=
el-upload，上传文件，后端提示信息，前端需要再次重新上传(不用重新选择文件)
m0_56104994的博客
11-04 724
el-upload上传文件，点击按钮重新上传，无需重新选择文件
解决element-ui中el-upload组件上传多个图片时出现重复图片问题
yht2004123的博客
05-16 4195
使用el-upload在上传图片时，上传多张时，会出现重复问题，原因是on-change在监听文件变化时，是每次选择一个文件就要返回一次调用，例如：选择了两个文件，a.png，b.png就要返回两次，第一次返回[a.png],第二次返回[a.png,b.png]，结果累加就是[a.png,a.png,b.png]，所以会造成重复,需要处理一下，只要最后一次调用。
【JavaScript源代码】element-ui中el-upload多文件一次性上传的实现.docx
12-28
总结起来，实现Element-UI的`el-upload`组件一次性上传多个文件的关键在于利用`FormData`对象来组合所有文件，并通过自定义的`http-request`属性覆盖默认的上传行为。同时，还需要确保在上传前对文件进行必要的验证...
element-ui 中使用upload多文件上传只请求一次接口
10-16
在使用Element UI的Upload组件进行多文件上传时，若要实现只发送一次请求到后端接口，可以通过两种主要的方法来实现。这两种方法分别是不使用组件内部钩子和使用组件内部的回调。 首先，来看不使用组件内部钩子的...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
12-03
总的来说，要解决Element-UI的`el-upload`组件在`before-upload`返回`false`时`submit()`无效的问题，可以利用组件的内部API手动触发上传或移除文件。确保在`before-upload`中执行自定义验证，并根据用户交互调用...
Element UI Upload 上传文件只能上传一次 ，再次点击上传后无反应的问题
m0_48259951的博客
01-18 8384
Element UI Upload 上传文件上传文件一次 ，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。 方法一：利用 :on-success ref=‘upload’ :on-success=“handleSuccess” 注意： ref='upload 一定要加上ref 不然不起作用 <el-upload class="upload-demo"
vue-element多文件上传多次请求接口问题解决办法
DuebassLei的博客
11-20 8983
element-ui多文件上传请求多次接口解决办法 问题 使用element-ui上传多文件时，发送请求出现多次提交问题,重复上传 警告: 切勿将发送后台请求的axios方法写在自定义上传方法如:http-request="handleHttpRequest"中,否则将会按文件数量发送，造成多次请求，不符合预期提交一次上传多个文件。 覆盖默认上传,自定义上传:http-request 覆盖默认...
解决 element upload上传图片一次之后，再次上传不生效
userFriends的博客
03-22 1655
【代码】解决 element upload上传图片一次之后，再次上传不生效。
el-upload组件二次提交不相应
qq_33541596的博客
11-22 2371
<el-dialog :close-on-click-modal="false" :visible.sync="phoneRecordInfo.visible" :append-to-body="true" :show-close="false" width="400px" class="m-dialog" > <div class="body"> <el-form .
ElementUI的upload组件手动上传，并携带参数和excel文件流提交给后台
热门推荐
提莫拌一团蘑菇
11-01 4万+
使用场景： 选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。???? 直接上代码： index.vue <el-form ref="importList" :rules="ImportRules" :model="importList" label-positio...
elementui el-upload一次请求上传多个文件
D浩DzD的博客
06-19 7719
方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传。注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用。使用自定义上传的接口，而不是使用*this.$refs.upload.submit();
使用elementui中的el-upload组件实现自定义上传功能，选择多次文件后，点击上传会上传多次的问题
weixin_47125604的博客
01-17 994
使用el-upload组件提供的on-change方法，在方法里面做如下处理，当再次选择的时候，删除已经前面选择的文件。
ElementUI的el-upload 文件上传
java_xxxx的博客
07-27 2万+
今天写项目用到了el-upload，整个控件功能很强大。 我的需求，前端点击上传，径图片保存到指定的文件夹，然后，获得保存后的路径返回给前端，赋值给user.image，之后再将完整的user对象插入数据库。 因为代码封装好了action就是请求路径，我们无法再象往常一样去，发送一个ajax请求，之后返回数据。于是问题出现了，如何获得我保存后的图片的路径呢？ 其实el-upload已经给我们...
关于ElementUi的Upload组件手动提交问题及代码优化
qq_36008278的博客
09-29 1794
最近在写项目时一直使用的是Elementui的Upload组件 照片墙的确很好用，不过会引发一些问题。 比如： 图片类型不对，fileList里是没有第二个文件的。但是照片墙已经显示了，我暂时将其视作bug吧。 解决办法： upload有beforeUpload属性 可是该属性在我实验过后发现 只能适用于单个文件，多文件的照片墙可以正常拦截，不过 照片墙会出现显示BUG。并且为了节省OSS的开支，选择手动 上传。使用onchange的属性监控添加文件的type是否为图片 不是图片直接fileList.p
element-ui组件文件上传获取submit为undefined
最新发布
08-26
在使用 Element-UI 的 `el-upload` 组件时，若尝试调用 `submit()` 方法却得到 `undefined`，通常是因为组件的引用未正确绑定或组件本身未提供该方法。根据 Element-UI 的文档和常见实践，`el-upload` 组件本身并不直接提供 `submit()` 方法，而是通过 `ref` 获取组件实例后调用其内部方法，或者通过配置属性控制上传行为[^1]。 ### 常见原因及解决方案 #### 1. 正确使用 `ref` 获取组件实例 确保在模板中为 `el-upload` 组件设置了 `ref` 属性，并在方法中通过 `this.$refs` 正确访问。例如： ```vue <template> <el-upload ref="upload" :auto-upload="false" action="your-upload-url"> <el-button slot="trigger" type="primary">选择文件</el-button> <el-button @click="submitUpload">提交上传</el-button> </el-upload> </template> <script> export default { methods: { submitUpload() { this.$refs.upload.submit(); } } }; </script> ``` 如果 `submit()` 方法仍然为 `undefined`，请检查是否遗漏了 `ref` 属性，或者是否在组件未正确挂载时调用了该方法（例如在 `mounted` 钩子之前）。 #### 2. 检查 `auto-upload` 设置 若希望手动控制上传流程，应设置 `:auto-upload="false"`，并在合适的时机调用 `submit()` 方法。此设置确保文件不会在选择后立即上传，而是等待手动触发[^2]。 #### 3. 确保组件版本兼容性 不同版本的 Element-UI 可能存在 API 差异。若使用的是较旧版本，可能存在 `submit()` 方法缺失或行为不一致的问题。建议升级至最新稳定版本以确保功能正常。 #### 4. 使用 `http-request` 自定义上传逻辑 若默认的上传机制不满足需求，可通过 `http-request` 属性自定义上传逻辑。该属性允许完全控制上传过程，适用于需要额外参数或使用第三方上传库的场景： ```vue <template> <el-upload :http-request="customUpload" :auto-upload="false" action="your-upload-url" ref="upload" > <el-button slot="trigger" type="primary">选择文件</el-button> <el-button @click="submitUpload">提交上传</el-button> </el-upload> </template> <script> export default { methods: { customUpload(options) { // 自定义上传逻辑 const formData = new FormData(); formData.append('file', options.file); // 添加其他参数 formData.append('param1', 'value1'); // 使用 axios 或其他方式上传 axios.post(options.action, formData).then(response => { options.onSuccess(response); }).catch(error => { options.onError(error); }); }, submitUpload() { this.$refs.upload.submit(); } } }; </script> ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值