当前位置: 首页 > news >正文

ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法(超详细,每个步骤都有详细解读)

背景: 使用ruoyi-vue进行2次开发,需要实现表单与文件上传一起提交,并且文件上传有4个,且文件校验很复杂,因此ruoyi-vue集成的上传组件FileUpload调试几天后发现真不太适用,最终选择element UI原生组件el-upload(FileUpload也是基于el-upload实现的),要实现表单与文件同时提交面临很多问题:

1. 首先ruoyi-vue生成代码中的接口不太适用 (put请求因为遇到很多问题,因此改成了网上统一使用的post请求),接口修改如下:

@RepeatSubmit //禁止重复提交
@Log(title = "文书发布记录", businessType = BusinessType.UPDATE)
@PostMapping("update")   public AjaxResult edit(ReleaseRecord releaseRecord, MultipartFile uploadFile2) throws Exception {//处理上传的文件逻辑....return toAjax(releaseRecordService.updateReleaseRecord(releaseRecord));}
/*
@RequestParam("uploadFile1")  
@RequestBody("uploadFile2")
@RequestPart("uploadFile2")
以上3个注解也是解决问题的途中去掉的,如果有这三种注解会有各种各样的问题,参考下面遇到的问题
*/

2. 前端表单提交方法修改(原本是put请求,因此需要随着API的修改而变化):

// 修改文书发布记录
export function updateRelease_record(data) {return request({url: '/pc-release/update',method: 'post',data: data})
}

3. 表单片段(上传组件,其他基础表单例如input类的太简单就不一一列举)

<el-form-item :label="upload.uploadTitle2" label-width="150px" prop="uploadFile2"><template><el-upload class="upload-demo" action="#" :limit="1" :on-exceed="handleExceed" :auto-upload="false" :multiple="false" :http-request="uploadFile2" :accept="upload.fileType" ref="uploadExcel2"><el-button type="primary">选择文件</el-button><div slot&#

相关文章:

ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法(超详细,每个步骤都有详细解读)

背景: 使用ruoyi-vue进行2次开发,需要实现表单与文件上传一起提交,并且文件上传有4个,且文件校验很复杂,因此ruoyi-vue集成的上传组件FileUpload调试几天后发现真不太适用,最终选择element UI原生组件el-upload(FileUpload也是基于el-upload实现的),要实现表单与文件同…...

python flask_restful “message“: “Failed to decode JSON object: None“

1、问题表现 "message": "Failed to decode JSON object: None"2、出现的原因 Werkzeug 版本过高 3、解决方案 pip install Werkzeug2.0解决效果 可以正常显示json数据了 {"message": {"rate": "参数错误"} }...

Linux内核有什么之内存管理子系统有什么第六回 —— 小内存分配(4)

接前一篇文章&#xff1a;Linux内核有什么之内存管理子系统有什么第五回 —— 小内存分配&#xff08;3&#xff09; 本文内容参考&#xff1a; linux进程虚拟地址空间 《趣谈Linux操作系统 核心原理篇&#xff1a;第四部分 内存管理—— 刘超》 特此致谢&#xff01; 二、小…...

【OpenHarmony内核】Harmony内核之线程操作函数(二)

文章目录 前言一、获取线程优先级二、转交控制运行权三、挂起线程3.1 线程的挂起是什么意思?3.2 函数介绍四、恢复线程五、分离指定的线程5.1 分离线程是什么意思5.2 函数介绍六、等待线程终止运行七、终止当前线程的运行八、终止指定线程的运行九、获取活跃线程数总结前言 O…...

二十五、W5100S/W5500+RP2040树莓派Pico<Modebus TCP Server示例>

文章目录 1 前言2 简介2 .1 什么是Modbus TCP&#xff1f;2.2 Modbus TCP指令介绍2.3 请求数据过程2.4 Modbus TCP协议优点2.5 Modbus TCP应用场景 3 WIZnet以太网芯片4 Modbus TCP示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 结果演示 5 注意…...

Android画个圆点状态灯

1、创建一个 XML 文件在 res/drawable 目录下&#xff08;默认为黑色&#xff09; <?xml version"1.0" encoding"utf-8"?> <shape xmlns:android"http://schemas.android.com/apk/res/android"android:shape"oval"><…...

高性能网络编程 - 解读3种线程模型

文章目录 Pre线程模型1&#xff1a;传统阻塞 I/O 服务模型线程模型2&#xff1a;Reactor 模式Reactor 模式的基本设计思想Reactor 模式中的关键组成3种典型实现单 Reactor 单线程单 Reactor 多线程主从 Reactor 多线程 小结 线程模型3&#xff1a;Proactor 模型 Pre 高性能网络…...

MATLAB中deconvwnr函数用法

目录 语法 说明 示例 使用 Wiener 滤波对图像进行去模糊处理 deconvwnr函数的功能是使用 Wiener 滤波对图像进行去模糊处理。 语法 J deconvwnr(I,psf,nsr) J deconvwnr(I,psf,ncorr,icorr) J deconvwnr(I,psf) 说明 J deconvwnr(I,psf,nsr) 使用 Wiener 滤波算法对…...

赛宁网安入选国家工业信息安全漏洞库(CICSVD)2023年度技术组成员单

近日&#xff0c;由国家工业信息安全发展研究中心、工业信息安全产业发展联盟主办的“2023工业信息安全大会”在北京成功举行。 会上&#xff0c;国家工业信息安全发展研究中心对为国家工业信息安全漏洞库&#xff08;CICSVD&#xff09;提供技术支持的单位授牌表彰。北京赛宁…...

Git系列之Git集成开发工具及git扩展使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Git实战开发》。&#x1f3af;&#x1f3af; &a…...

selenium headless 无头模式慢

selenium设置headlessTrue发现非常慢&#xff0c;headlessFalse要快很多。 最后测试发现升级到selenium最新版本&#xff0c;selenium4.15.2。设置--headlessnew&#xff0c;解决了&#xff0c;速度正常了。 新版selenium有了两种headless模式&#xff0c;参见&#xff1a;He…...

快速修复因相机断电导致视频文件打不开的问题

3-5 本文主要解决因相机突然断电导致拍摄的视频文件打不开的问题。 在日常工作中&#xff0c;有时候需要使用相机拍摄视频&#xff0c;比如现在有不少短视频拍摄的需求&#xff0c;如果因电池突然断电的原因&#xff0c;导致拍出来的视频播放不了&#xff0c;这时候就容易出大…...

Ceph 笔记, ssh写入缓存

硬件建议 — Ceph 文档 写入缓存 企业级 SSD 和 HDD 通常包括断电保护功能&#xff0c;包括 在运行时断电时确保数据耐久性&#xff0c;以及 使用多级缓存来加快直接或同步写入速度。这些设备 可以在两种缓存模式之间切换 -- 刷新到的易失性缓存 具有 fsync 的持久性媒体&a…...

WebSocket魔法师:打造实时应用的无限可能

1、背景 在开发一些前端页面的时候&#xff0c;总是能接收到这样的需求&#xff1a;如何保持页面并实现自动更新数据呢&#xff1f;以往的常规做法&#xff0c;是前端使用定时轮询后端接口&#xff0c;获取响应后重新渲染前端页面&#xff0c;这种做法虽然能达到类似的效果&…...

网络运维Day06-补充

文章目录 RAID磁盘阵列RAID0条带模式RAID1镜像模式RAID5高性价比模式RAID01RAID10 逻辑卷一块磁盘的使用流程逻辑卷的使用流程 制作逻辑卷步骤一&#xff1a;添加硬盘步骤二&#xff1a;分区规划步骤三&#xff1a;制作物理卷步骤四&#xff1a;制作卷组步骤五&#xff1a;制作…...

openssl+SM2开发实例一(含源码)

一、SM2算法介绍 SM2&#xff08;国密算法2&#xff09; 是中国国家密码管理局&#xff08;CNCA&#xff09;颁布的椭圆曲线密码算法标准&#xff0c;属于非对称加密算法。它基于椭圆曲线离散对数问题&#xff0c;提供了安全可靠的数字签名、密钥交换和公钥加密等功能。SM2被设…...

操作系统 | 编写内核

&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《操作系统实验室》&#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 目录结构 1. 操作系统实验之编写内核 1.1 实验目的 1.2 实验内容 1.3 实验步骤 1.4 实验过程 …...

Rust逆向学习 (4)

Reverse for Struct Rust中的结构体是一个重要的内容&#xff0c;由于Rust中没有类的概念&#xff0c;因此其他编程语言中的封装、继承、多态与Rust中的表现都有较大差异。 我们使用参考书中的一个示例开始进行分析。 Struct 初始化 struct User {username: String,email: …...

uniapp vue2 vuex 持久化

1.vuex的使用 一、uniapp中有自带vuex插件&#xff0c;直接引用即可 二、在项目中新建文件夹store,在main.js中导入 在根目录下新建文件夹store,在此目录下新建index.js文件 index.js import Vue from vueimport Vuex from vuexVue.use(Vuex)const store new Vuex.Store(…...

【媒体邀约】媒体宣传——企业成长的催化剂

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传是企业成长的催化剂&#xff0c;它在各种方面对企业的成功和发展起到了关键作用。 1. 曝光和知名度&#xff1a; 媒体宣传可以将企业和其产品或服务推向广泛的受众&#xff0c;…...

QQ空间说说备份终极指南:5分钟免费导出所有历史记录

QQ空间说说备份终极指南&#xff1a;5分钟免费导出所有历史记录 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 你是否担心QQ空间里那些珍贵的青春记忆会随着时间流逝而消失&#xff1f…...

DRM驱动开发避坑指南:为什么你的drmModeAddFB调用失败了?常见参数错误排查

DRM驱动开发避坑指南&#xff1a;为什么你的drmModeAddFB调用失败了&#xff1f;常见参数错误排查 在DRM&#xff08;Direct Rendering Manager&#xff09;驱动开发中&#xff0c;drmModeAddFB和drmModeAddFB2接口是创建帧缓冲区的核心API。然而&#xff0c;许多开发者在初次使…...

题解:洛谷 AT_abc391_c [ABC391C] Pigeonhole Query

本文分享的必刷题目是从蓝桥云课、洛谷、AcWing等知名刷题平台精心挑选而来,并结合各平台提供的算法标签和难度等级进行了系统分类。题目涵盖了从基础到进阶的多种算法和数据结构,旨在为不同阶段的编程学习者提供一条清晰、平稳的学习提升路径。 欢迎大家订阅我的专栏:算法…...

Tmall_Tickets开发者指南:从零构建Chrome抢票插件

Tmall_Tickets开发者指南&#xff1a;从零构建Chrome抢票插件 【免费下载链接】Tmall_Tickets 天猫超市茅台抢票功能 项目地址: https://gitcode.com/gh_mirrors/tm/Tmall_Tickets Tmall_Tickets是一款强大的Chrome抢票插件&#xff0c;专为天猫超市茅台抢购场景设计。本…...

tbls lint检查完全指南:构建高质量数据库的10个最佳实践

tbls lint检查完全指南&#xff1a;构建高质量数据库的10个最佳实践 【免费下载链接】tbls tbls is a CI-Friendly tool to document a database, written in Go. 项目地址: https://gitcode.com/gh_mirrors/tb/tbls tbls是一个CI友好的数据库文档工具&#xff0c;用Go语…...

如何参与Haskell工具Stack的开源贡献:完整指南

如何参与Haskell工具Stack的开源贡献&#xff1a;完整指南 【免费下载链接】stack The Haskell Tool Stack 项目地址: https://gitcode.com/gh_mirrors/st/stack Stack是Haskell开发的核心工具&#xff0c;它提供了项目构建、依赖管理和测试等一站式解决方案。作为开源项…...

AGI自主编写0day Exploit仅需23秒?实测GPT-5、Claude-4、Qwen-AGI在CVE-2024-XXXX系列漏洞上的武器化效率对比

第一章&#xff1a;AGI的网络安全攻防能力 2026奇点智能技术大会(https://ml-summit.org) 通用人工智能&#xff08;AGI&#xff09;在网络安全领域正展现出远超传统AI系统的动态攻防潜力——它不仅能实时解析零日漏洞利用链&#xff0c;还可自主构建对抗性样本绕过多层检测机…...

WSL 极速部署 llama.cpp:三步搞定 CPU、GPU 本地运行大模型(CUDA 加速)

摘要&#xff1a; 想在 Windows 下本地跑大模型&#xff0c;又不想搞双系统&#xff1f;WSL llama.cpp 是最轻量、高效的选择。本文将带你一步步完成环境配置、源码编译&#xff08;可选 NVIDIA GPU 加速&#xff09;&#xff0c;并下载模型直接运行。无需复杂依赖&#xff0c…...

python minikube

## 关于Python和Minikube&#xff0c;一些你可能没细想的细节 最近在容器化和本地开发环境搭建的话题里&#xff0c;Minikube被提到的次数越来越多了。但很多Python开发者第一次接触它时&#xff0c;难免会有些疑惑&#xff1a;这玩意儿和Python开发到底有什么关系&#xff1f;…...

5G/4G流量卡技术原理与合规选购实战(2026最新)

随着移动互联网、物联网、远程办公的普及&#xff0c;流量卡&#xff08;数据卡、上网卡&#xff09;成为很多用户的刚需。但市面上产品鱼龙混杂&#xff0c;虚量、限速、封卡、售后失联等问题频发。本文从技术原理、合规标准、选购要点、平台选择四个维度&#xff0c;做一次完…...