element ui 中使用el-upload点击导致页面刷新问题

最新推荐文章于 2024-07-16 16:08:01 发布
最新推荐文章于 2024-07-16 16:08:01 发布
阅读量3.4k 收藏 2
点赞数 10
CC 4.0 BY-SA版权
分类专栏： 笔记 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/abei0518/article/details/123733456
本文介绍了如何将el-upload组件嵌入到el-form中，并通过使用@submit.native.prevent阻止el-form在包含el-upload时自动提交。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-upload写在el-form表单里了，el-form有自动提交的功能，只要给form加上@submit.native.prevent 就可以了，阻止它自动提交在这里插入图片描述

Vue3项目中el-upload组件上传文件后导致页面刷新的问题分析与解决
Aegis5的博客
01-07 2964
el-upload组件上传文件后导致页面刷新
$('# xxx ').fileupload({}) 上传完成自动刷新页面的大坑
weixin_38215472的博客
11-25 1570
我用 fileupload 组件操作文件上传完成后，自动刷新到首页（而我不需要刷新的）找了很久没有找到原因，发现遇到了大坑。。。 上代码： jsp: <input value="请点击选择文件..." readonly="readonly" type="text" id="textfield" onclick="document.getElementById('enclosure')...
el-upload上传文件，且带进度条，随带刷新页面小知识
hehe_www2012的博客
04-11 5268
1.若是直接使用el-upload的自动上传，那么它就直接携带着上传进度条，不过很多时候，我们上传文件的时候需要携带一些信息，如token信息 2.故而选用手动上传文件，而这个时候
【el-upload】element ui form表单中使用el-upload 上传附件点击导致页面刷新问题以及浏览器url路径中自动拼接带有“&file=“参数
m0_59157023的博客
06-27 554
element ui 中使用el-upload 上传附件点击导致页面刷新问题以及浏览器url路径中自动拼接带有"file="参数。
element-ui单文件上传以后，必须刷新才能再次上传文件
TTST_HTSN的博客
08-28 1104
问题描述 使用element-ui的上传文件组件写一个批量导入，但是发现每次打开上传文件，只有进入页面第一次点击上传文件才调用上传接口，进行文件上传，前思后想，外加百度查询，我解决了这个问题。先上个图片看看问题：下边图片是上传时候打印出来的，当再次上传，没有打印东西，也就是说没有调用上传文件接口 原因 单文件上传以后，data中的fileList，已经放入一个文件了，当你再次上传，并没有清楚本文件或者覆盖上一个文件，导致上传行为并没有执行。 解决办法 上传不管是失败还是成功，都执行一下清空fileList
element-ui单文件上传以后，必须刷新（不操作刷新的解决）才能再次上传文件
weixin_46037781的博客
09-30 2497
问题描述 使用element-ui的上传文件组件写一个批量导入，但是发现每次打开上传文件，只有进入页面第一次点击上传文件才调用上传接口，进行文件上传，前思后想，外加百度查询，我解决了这个问题。先上个图片看看问题：下边图片是上传时候打印出来的，当再次上传，没有打印东西，也就是说没有调用上传文件接口 原因 单文件上传以后，data中的fileList，已经放入一个文件了，当你再次上传，并没有清楚本文件或者覆盖上一个文件，导致上传行为并没有执行。 解决办法 上...
关于Android设备中，网页端上传操作导致浏览器刷新的问题
cshao的专栏
02-25 2794
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
12-03
在Vue2.0中，Element-UI库提供了一个强大的组件`el-upload`，用于处理文件上传功能。在本文中，我们将深入探讨如何解决在`before-upload`方法返回`false`时，`submit()`方法不生效的问题，以及如何在取消上传时仅...
Vue-cli 3.0 中 Element-UI 的 el-upload 组件使用指南
最新发布
07-29
在 Vue CLI 3.0 项目中，Element-UI 的 el-upload 组件是一个功能强大的文件上传工具，能够满足多种复杂的文件上传需求。以下是对该组件的详细说明及使用方法。 el-upload 组件提供了多种属性来实现文件上传的限制...
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
Aotman_的博客
07-16 2909
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
el-upload自定义上传样式 el-upload上传后回显为表格数据
weixin_51565477的博客
08-31 2977
template action 必选参数，上传后台接口地址 data 上传时附带的额外参数（图片2） on-success 上传成功执行函数 headers 设置上传的请求头部 multiple 是否支持多选文件,可以不写 :limit=“3” 最大允许上传个数,可以不写 <div> <div class="medical-title"> <p class="card-title">体检报告</p> <el..
el-upload 在弹框中上传组件再次打开会闪现之前的文件
九亿宅男的梦的博客
06-17 1144
el-upload 在弹框中上传组件再次打开会闪现之前的文件
(实战-改bug)element ui Upload组件 上传一次后，再次点击上传 没反应
m0_67066313的博客
10-08 2963
日常改bug，减少出错率
el-upload解决无法二次上传问题
h_未来可期_的博客
01-16 5930
el-upload无法二次上传、二次上传失败
vue 图片上传，不回显，实时刷新
weixin_44021888的博客
08-31 2113
vue 图片上传，不回显，实时刷新
解决element-ui上传图片，数据不刷新的问题
【Keras】 计算机视觉 CNN 实现猫狗图片分类40677825的博客
07-08 2484
先说一下本人遇到的情况。前端使用的是 element-ui 框架，并通过 axios 插件调用 api 获取数据。数据库使用的是 mongodb，所以后台的插件使用的是 mongoose。 <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess"
vue-element上传文件没有及时回显
qq_38620802的博客
03-24 1928
问题描述 提示：这里描述项目中遇到的问题： VUE: 文件上传后需要在页面实时相应，但是vue 上传文件却没有及时回显 @Override handleSuccess(res,file){ this.file.img_url = res.data.img_url this.file.img_id = res.data.file_id } 改为一下方式：（使用vue-set直接写入|无需vue再次加载转化） @Override handleSuccess(res,file){
27.upload组件以及更新系统平面图
m0_65436732的博客
10-07 320
实现学校的二维平面图的上传管理，要有这个功能才能够根据我们不同的学校进行定制化的一个需求处理。我们虽然整个项目是spring boot也能够进行上传，我们得写好上传的一个接口。
element UI el-upload auto-upload
06-21
### Element UI el-upload 组件 auto-upload 属性用法及配置 `auto-upload` 是 Element UI 的 `el-upload` 组件中的一个属性，用于控制文件上传是否在选择文件后立即触发。如果将其设置为 `false`，则需要手动调用组件的 `submit` 方法来触发上传操作[^1]。 以下是关于 `auto-upload` 属性的具体说明和使用方法： #### 1. 基本用法 当 `auto-upload` 属性被设置为 `true`（默认值）时，用户选择文件后会立即触发上传操作。如果将其设置为 `false`，则需要通过手动调用组件实例的 `submit` 方法来执行上传操作。 ```html <el-upload action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :on-change="handleChange"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" @click="uploadFile">上传到服务器</el-button> </el-upload> ``` #### 2. 手动触发上传 当 `auto-upload` 设置为 `false` 时，可以通过以下方式手动触发上传： - 在模板中绑定按钮事件，调用组件实例的 `submit` 方法。 - 示例代码如下： ```javascript export default { methods: { uploadFile() { this.$refs.upload.submit(); // 调用组件实例的 submit 方法 }, handleChange(file, fileList) { console.log('文件改变：', file, fileList); } } } ``` #### 3. 自定义上传逻辑 如果需要实现自定义上传逻辑，可以结合 `http-request` 属性来实现。例如，使用 Axios 发起自定义的 HTTP 请求。 ```html <el-upload action="#" :auto-upload="false" :http-request="customUpload"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" @click="uploadFile">上传到服务器</el-button> </el-upload> ``` ```javascript export default { methods: { uploadFile() { this.$refs.upload.submit(); }, customUpload(params) { const formData = new FormData(); formData.append('file', params.file); axios.post('https://jsonplaceholder.typicode.com/posts/', formData) .then(response => { console.log('上传成功：', response); }) .catch(error => { console.error('上传失败：', error); }); } } } ``` #### 4. 注意事项 - 如果 `auto-upload` 设置为 `false`，必须确保通过 `submit` 方法手动触发上传，否则文件不会被上传。 - 在自定义上传逻辑中，可以使用 `before-upload` 钩子函数对文件进行预处理或校验。 - 如果需要显示上传进度，可以结合 `on-progress` 钩子函数实现[^2]。 ### 总结 `auto-upload` 属性提供了灵活的文件上传控制机制。通过将其设置为 `false`，可以实现更复杂的上传逻辑，例如批量上传、文件校验或自定义 HTTP 请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值