当前位置: 首页 > 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&#
http://www.lryc.cn/news/225523.html

相关文章:

  • python flask_restful “message“: “Failed to decode JSON object: None“
  • Linux内核有什么之内存管理子系统有什么第六回 —— 小内存分配(4)
  • 【OpenHarmony内核】Harmony内核之线程操作函数(二)
  • 二十五、W5100S/W5500+RP2040树莓派Pico<Modebus TCP Server示例>
  • Android画个圆点状态灯
  • 高性能网络编程 - 解读3种线程模型
  • MATLAB中deconvwnr函数用法
  • 赛宁网安入选国家工业信息安全漏洞库(CICSVD)2023年度技术组成员单
  • Git系列之Git集成开发工具及git扩展使用
  • selenium headless 无头模式慢
  • 快速修复因相机断电导致视频文件打不开的问题
  • Ceph 笔记, ssh写入缓存
  • WebSocket魔法师:打造实时应用的无限可能
  • 网络运维Day06-补充
  • openssl+SM2开发实例一(含源码)
  • 操作系统 | 编写内核
  • Rust逆向学习 (4)
  • uniapp vue2 vuex 持久化
  • 【媒体邀约】媒体宣传——企业成长的催化剂
  • ansible问题排查
  • 7天入门python系列之第四天python数据结构
  • 远程电脑未连接显示器时分辨率太小的问题处理
  • Java 设计模式——解释器模式
  • 面试经典150题——Day37
  • 在 Arduino IDE 2.0 中安装 ESP32 板(Windows、Mac OS X、Linux)
  • 西门子S7-1200PLC混合通信编程(ModbusTcp和UDP通信)
  • Hbase 迁移小结:从实践中总结出的最佳迁移策略
  • 键盘win键无法使用,win+r不生效、win键没反应、Windows键失灵解决方案(亲测可以解决)
  • 1. 深度学习——激活函数
  • chatglm3-6b部署及微调