菜鸟程序员遇坑记1 - FormData 之传送文件数组和对象

最新推荐文章于 2024-07-13 14:08:56 发布
最新推荐文章于 2024-07-13 14:08:56 发布
阅读量1.5k 收藏
点赞数 2
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mumei_/article/details/120695022
版权

菜鸟程序员遇坑记1 - FormData 之传送文件数组和对象

今天遇到一个需求，后端要求前端返回id ，文件数组，一个文件信息对象的形式发给他。而这个需求是之前一个提桶跑路的同事写的，然后我来接手，然后我就发现之前是用formData给后端一个字段对应一个文件，但是现在需求变更了，然后我模仿写了一下很尴尬的是后端除了id 之外收到其他两个字段里面都没有东西。
然后通过面向百度编程发现如果是想要以文件数组的形式发给后端动的话，这样是不行的。

// 字段名，文件数组
formData.append(‘array’, array);

下面才是正确的做法

// 字段名 + 下标 ，具体文件
formData.append(`array${index}`, array[index]);

然后好不容易把文件数组成功发给了后端竟然发现他还是拿不到对象
于是试了一系列方法 把对象转为JSON给后端等等后端还是拿不到
然后发现网上的大部分好像都是传键名：键值的来的
最后因为开发有点急无奈之下最后和后端讨论了一下只能把接口拆为两个，文件对象另外为json的形式发给他。

如果有大佬可以指导一下formdata怎么传对象，万分感谢！

之后有空会补充一些关于formdata的资料

mumei_
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript - 实现向 formData 对象中追加数组或对象，使用 append() 插入数组、对象等复杂数据类型（vue / uniapp / react 项目通用解决方案）
王佳斌
02-14 5353
JS，vue如何在 FormData 中追加数组？uniapp vue js formData传递数组，数组添加进formdata,javascript - 将FormData对象放入数组，FormData传数组对象的方法 前端，vue JS,如何在FormData中追加数组，JS,如何在 FormData 中追加数组，JS,如何在 FormData 中追加数组，formData 传对象和数组、空文件的方法，我可以在javascript中将数组附加到'formdata'吗?，javascript如何向For
使用FormData向后台传递数组
qq_17162169的博客
06-05 1029
使用formData向后台传递数组的方式
formdata传递参数_前端利用formData格式进行数据上传，前端formData 传值 和 json传值的区别？...
weixin_39844942的博客
12-18 3314
contentType 常见的格式text/plain ：纯文本格式application/json： JSON数据格式application/x-www-form-urlencoded 中默认的encType，form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格一....
form-data传输数组
qq_42865514的博客
03-17 4610
form-data传输数组 原本的数据： let data = { id_list:[23652,59845] } 这不是后端需要的数组！ 修改后： let data = { id_list:JSON.stringify([23652,59845]) } 大功告成！ ...
如何通过form-data或json传递数组形式的入参，后端如何识别并处理数组入参，并通过Apipost发送数组形式的入参进行测试
最新发布
weixin_71894495的博客
07-13 529
本文介绍了通过form-data或json传递数组形式的入参，后端如何进行识别并处理数组入参，并通过Apipost发送数组形式的入参进行测试
formData传递数组
热门推荐
weixin_43773218的博客
07-04 1万+
在formData添加数组时，会有一个的问题，就是post请求会把数组拼接成一个字符串发送给服务器。这种时候有两种解决方案一、后台拿到字符串后，再截取字符串来生成数组二、对数据进行字符串化，即JSON.stringify() let formData = new FormData(); formData.append('coordinate',JSON.stringify(this.$route.query.position.geometry.coordinates[0]))这样就能成功以数组形式添加进fo
FormData 上传多文件数组形式
dream_enterprising的博客
06-11 5535
有的时候后端接口的一些要求 上传多个文件，只要一个属性files 为数组格式 这个时候我们只需要 let FormData = new FormData() FormData.append("files", 选择的文件) FormData.append("files", 选择的文件) FormData.append("files", 选择的文件) 就可以实现files 数组格式的参数 ...
formData添加数组
zn_firm的博客
11-03 1284
在上传文件时， 我们一般会用ui的上传组件，在需要手动上传的情况下，我们都会用formData的数据格式去上传，有时会遇到添加的数据是数组的情况，formData添加数组时会有点不一样。
jQuery Ajax使用FormData对象上传文件的方法
11-23
在现代Web开发中，文件上传是一项常见的功能，jQuery与Ajax结合使用FormData对象提供了一种高效、灵活的异步上传方式。FormData对象允许我们构建一个模拟的表单数据集，然后利用XMLHttpRequest对象发送这些数据，而...
react + ant design 多文件上传、formData中包含对象数组的解决方案
daoerZ的博客
02-02 2460
多个文件上传时，需要逐个将文件参数添加到formData中，如 if (val.file) { val.file.map(x => formData.append('file', x.originFileObj)); } 后台的接口参数需写成 @PostMapping(value = "/uploadFile", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
sparkjava-rest-api:SparkJava Rest Api-FormData和文件上传
05-14
在multipart/form-data编码类型下，FormData可以包含文本数据和二进制数据，如文件。SparkJava提供了方便的API来处理这类请求。 在SparkJava中，你可以使用`request()`对象来获取请求的数据。例如，如果你有一个名...
后端接口接收对象和文件集合，formdata传递数组对象
Gpointy的博客
11-04 3479
后端接口需要接收前端传递过来的对象和文件集合；对象中存在数组对象。
form-data表单格式向后台传输数组对象
u014409941的博客
12-07 969
form-data表单格式向后端传递数组对象
formdata怎么传数组_转换formdata参数格式
weixin_39571404的博客
01-26 8795
在formdata中传递复杂参数时，很头疼，期望是一个样子，结果到了后台又是另一个样子，介绍几个基本的formdata格式传递一个普通的对象obj:{name:'testname',age:'testage'}需要写成这个样子‘obj[name]’:'testname'‘obj[age]’:'testage'传递一个数组arr:['name','age','sex']需要写成这个样子'arr[]'...
使用formData实现内容和文件上传
xiamoziqian的博客
12-02 3794
一、FormData简介 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 二、FormData的主要用途 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 异步上传文件 三、FormData的使用 1.基本使用 创建一个formDat...
使用formData向后台传递数组对象
tyjlearning的博客
09-19 8266
1.前端 let formDatas = new FormData(); let sealValues = t.sealValues; formDatas.append('pdfFile', t.parsePdfFile); for(let i=0,len=sealValues.length;i<len;i++){ let locationInfo = sealValues[i]; formDatas.append('sealLocationInfoList['+i+'].posX
用FormData形式传参（字符串、数组）
weixin_53935634的博客
03-18 6755
1.字符串： var array = new FormData(); array.append("name",张三) 2.数组 ： 1)、定义一个数组 var arrays = [ ] 2）、我现在需要用到另一个数组里面的某个字符串，所以我要从那个数组里取值 var a = [1,2,3,4] this.dialogtable.forEach((item) => { arrays .push(item.first); }); 3）、var array = new FormDa
formdata怎么传数组_如何使用formData上传file数组
weixin_39678304的博客
12-19 3115
因为 input type=‘file’ 再次点击会将之前的fileList覆盖，所以我先将选中的文件转成base64作为预览图片，类似于这样，可以多次添加但是我在上传的时候如何将多个预览图片添加到 formdata 对象中，后台接受参数是一个 MultipartFile[] files 数组。下面是我的错误做法：function getImgFiles() {var imgFiles = [];...
formdata怎么传数组_关于 FormData 对象数组传值总结
weixin_31669073的博客
02-01 2882
关于 FormData 对象数组传值总结jQuery Java Spring MVCjQuery 代码提示： Ncr 已经存在于实体类中。// 提交数据$('#submit-btn').click(function(){// 数据获取var formData = {};var inputNum = $('.form-horizontal label').length;// 判断控件类型,以 for...
spring boot 接受formdata 包含文件的数组对象
05-24
可以使用 `@RequestParam` 注解来接受 formdata 中的文件数组对象。具体步骤如下： 1. 创建一个表单，其中包含一个 file input，可以选择多个文件： ```html <form method="POST" enctype="multipart/form-data" action="/upload"> <input type="file" name="files" multiple> <button type="submit">上传</button> </form> ``` 2. 在控制器中创建一个方法来处理上传请求，使用 `@RequestParam` 注解来接受文件数组对象： ```java @PostMapping("/upload") public String handleFileUpload(@RequestParam("files") MultipartFile[] files) { // 处理文件上传逻辑 } ``` 在上面的代码中，`@RequestParam("files")` 表示要接受名为 "files" 的参数，它是一个文件数组对象。`MultipartFile` 是 Spring 提供的一个文件上传对象，它封装了上传的文件内容、文件名等信息。 3. 处理文件上传逻辑，例如将文件保存到本地磁盘： ```java @PostMapping("/upload") public String handleFileUpload(@RequestParam("files") MultipartFile[] files) { for (MultipartFile file : files) { if (!file.isEmpty()) { try { byte[] bytes = file.getBytes(); Path path = Paths.get(file.getOriginalFilename()); Files.write(path, bytes); } catch (IOException e) { e.printStackTrace(); } } } return "redirect:/"; } ``` 在上面的代码中，我们遍历了文件数组对象，对于每个文件，判断它是否为空，如果不为空，则将文件内容保存到本地磁盘上。最后返回一个重定向到首页的视图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值