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="tip" class="el-upload__tip">大小不超过10mb</div>
	    </el-
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

往事不堪回首..

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值