前端formData传参，后端Dto对象接收

最新推荐文章于 2025-03-19 17:43:05 发布
原创 最新推荐文章于 2025-03-19 17:43:05 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

本文讨论了前端在上传图片时使用FormData而非RequestBody进行传参的原因，并介绍了由此带来的问题，即无法过滤null值，进而导致数据插入异常。文章进一步提出了后端处理此问题的解决方案：通过数据复制将前端传递的数据封装到DTO中。

一般情况前端RequestBody传参

 

当前端新增数据时需要上传图片不支持requestBody传参，只能用formdata传参

当使用formdata传参时，前端无法过滤掉null数据，导致数据插入 异常

此时后端需要将前端传的数据重新封装成dto，dto只涵盖前端传的参数，然后后端通过数据copy封装新增的数据对象即可。

 

【NestJS】HTTP 接口传参的 5 种方式（含前端调用与后端接收）
公众号@三十的编程日记
09-02 893
在前后端开发中，HTTP 接口的数据传输方式有多种，常见的有 query、url param、form-urlencoded、form-data、json。 作为前端，我们不仅要知道如何调用，还要理解后端如何接收。今天我们用 NestJS 来演示这几种方式。
解决前端FormData对象的后端接收问题-附件资源
03-05
解决前端FormData对象的后端接收问题-附件资源
formData手动上传问题前端如何传递后端如何接收
欢迎来到烟火气知识小天地！这里记录生活、工作中的 “小麻烦”，从软件故障到生活难题，我会毫无保留分享解决思路与方法，愿成为你排忧解难时的温暖参考，伴你在解决问题路上稳步前行。
10-09 1万+
Required request part ‘files’ is not present,the request was rejected because no multipart boundary was found,Current request is not a multipart request
前端发送的form-data类型name=“carNumber“的参数后端怎么接收
qq_58030790的博客
11-21 4878
前端发送的form-data类型name="carNumber"的参数后端怎么接收
FormData异步发送文件，后端SpringBoot接收
qq_57390446的博客
03-09 2475
FormData是js里的一个表单对象，通常用于异步发送文件
解决前端FormData对象的后端接收问题
wcj1840224162的博客
12-20 1万+
实现后端对Ajax的FormData对象所传文件的接收 ServletFileUpload的依赖库链接： https://pan.baidu.com/s/14MfxOghnP-t1Q-sAQDh6kA 提取码：hcyc 前端FormData： <form id="form1" method="post" enctype="multipart/form-data" action="" style=" width: 80%; margin:0 auto;"> <!-- form要设置 en
前端如何给后端传参
07-05
1. 如何在后端Spring Boot中接收前端传递的数组参数？ 2. 前端如何上传文件到Spring Boot后端？ 3. 如何验证前端传递的参数？ 4. Spring Boot如何处理跨域请求（CORS）？ 5. 如何在前端使用axios发送带认证令牌的...
spring boot文件上传，前端怎么设置参数传参，后端怎么用@requestBody接收
10-01
### 前端设置参数传参的方法 #### HTML 表单上传 使用 HTML 的 `<form>` 元素，设置 `enctype="multipart/form-data"` 来支持文件上传，同时可以添加其他普通参数。示例代码如下： ```html <!DOCTYPE html> ...
spring boot文件上传，前端怎么设置定义参数、传参，后端怎么用@requestBody接收
最新发布
10-01
### 前端设置和定义参数并传参的方法 #### HTML 表单方式 使用 HTML 的 `<form>` 元素，设置 `enctype="multipart/form-data"` 来支持文件上传，同时可以添加其他普通参数。示例如下： ```html <!DOCTYPE html> ...
postmqn使用formdata传参报 JsonParseException: Unexpected character ('-' (code 45)) in numeric value: expe
08-05
1. **后端接口设计**：后端接口使用`@RequestBody`注解，这意味着它期望请求体是JSON格式，并且Spring会尝试将请求体解析为`StudentDTO`对象。 2. **前端请求设置**：用户使用Postman发送请求时，选择了`form-data`...
FormData实现文件上传（前端+后端）
07-12
文件上传，包括前端和后端的核心代码，IE8无法获取文件真实路径，可以通过该方法来实现文件上传，使用的是FormData传递文件数据。
前端上传文件 ajax发送FormData，后端如何接收
热门推荐
weixin_44294593的博客
11-14 1万+
前后端分离且跨域的情况下 form表单提交数据，且数据中包含文件提交上传 解决方法 及 步骤： 1 前端用formdata()的方式提交 let form=document.getElementById('form') var param = new FormData(form); let config = { //添加请求头 headers: { 'Conten...
好程序员web前端培训分享FormData 简单介绍
qq_35970166的博客
04-28 433
​好程序员web前端培训分享FormData 简单介绍，FormData是Ajax 2.0对象用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。XMLHttpRequest Level 2提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作。 我们打印这个构造函数看一眼 ƒ FormData() arguments: null caller: null l...
前端 FormData 详解
weixin_64684095的博客
03-19 1703
FormData是前端处理表单数据（尤其是文件上传）的强大工具。它简化了表单数据的构造和发送过程，支持键值对和文件数据，并且与fetch和无缝集成。无论是上传文件还是提交普通表单数据，FormData都是一个高效且便捷的选择。
前端FormData详解
weixin_64051447的博客
03-17 2855
FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
前后端交互之FormData格式的参数传递
xllllll___的博客
03-24 4166
前后端在交互的时候，一般如果后端需要前端返回一个文件类型的数据，在一般情况下，前端会有FormData类型的数据格式来进行数据的传输，来上传文件和数据。FormData主要提供了一种表示表单数据的键值对key/value的构造方式，从命名我们可以得出，FormData是专门为表单传输量身定做的类型，但是FormData的功能要比application/json强的多，使用FormData也可以用来传递文件数据，而且在window上也直接挂载了FormData对象，方便我们使用。
前后端传参==FormData文本和文件（图片等）同时上传、后端springboot接收CommonsMultipartResolver
hebian1994的博客
12-21 3753
pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org...
前端利用formData格式进行数据上传
LQ271524的博客
07-12 1万+
contentType 常见的格式 text/plain ：纯文本格式 application/json： JSON数据格式 application/x-www-form-urlencoded中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式） multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格 一. json格式传递 fetch(url, { method: 'POST', // or 'PUT' b
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值