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

最新推荐文章于 2024-10-06 12:26:18 发布

mumei_

最新推荐文章于 2024-10-06 12:26:18 发布

阅读量1.5k

点赞数 2

文章标签： js

本文链接：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的资料

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mumei_

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript - 实现向 formData 对象中追加数组或对象，使用 append() 插入数组、对象等复杂数据类型（vue / uniapp / react 项目通用解决方案）

王佳斌

02-14

5577

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

1076

使用formData向后台传递数组的方式

参与评论您还未登录，请先登录后发表或查看评论

formdata传递参数_前端利用formData格式进行数据上传，前端formData 传值和 json传值的区别？...

weixin_39844942的博客

12-18

3349

contentType 常见的格式text/plain ：纯文本格式application/json： JSON数据格式application/x-www-form-urlencoded 中默认的encType，form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)multipart/form-data ：需要在表单中进行文件上传时，就需要使用该格一....

form-data传输数组

qq_42865514的博客

03-17

4654

form-data传输数组原本的数据： let data = { id_list:[23652,59845] } 这不是后端需要的数组！修改后： let data = { id_list:JSON.stringify([23652,59845]) } 大功告成！ ...

javascript——表单，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

5682

有的时候后端接口的一些要求上传多个文件，只要一个属性files 为数组格式这个时候我们只需要 let FormData = new FormData() FormData.append("files", 选择的文件) FormData.append("files", 选择的文件) FormData.append("files", 选择的文件) 就可以实现files 数组格式的参数 ...

后端接口接收对象和文件集合，formdata传递数组对象

Gpointy的博客

11-04

3570

后端接口需要接收前端传递过来的对象和文件集合；对象中存在数组对象。

sparkjava-rest-api:SparkJava Rest Api-FormData和文件上传

05-14

在multipart/form-data编码类型下，FormData可以包含文本数据和二进制数据，如文件。SparkJava提供了方便的API来处理这类请求。在SparkJava中，你可以使用`request()`对象来获取请求的数据。例如，如果你有一个名...

react + ant design 多文件上传、formData中包含对象数组的解决方案

daoerZ的博客

02-02

2498

多个文件上传时，需要逐个将文件参数添加到formData中，如 if (val.file) { val.file.map(x => formData.append('file', x.originFileObj)); } 后台的接口参数需写成 @PostMapping(value = "/uploadFile", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

jQuery Ajax使用FormData对象上传文件的方法

11-23

在现代Web开发中，文件上传是一项常见的功能，jQuery与Ajax结合使用FormData对象提供了一种高效、灵活的异步上传方式。FormData对象允许我们构建一个模拟的表单数据集，然后利用XMLHttpRequest对象发送这些数据，而...

formData添加数组

zn_firm的博客

11-03

1495

在上传文件时，我们一般会用ui的上传组件，在需要手动上传的情况下，我们都会用formData的数据格式去上传，有时会遇到添加的数据是数组的情况，formData添加数组时会有点不一样。

form-data表单格式向后台传输数组对象

u014409941的博客

12-07

995

form-data表单格式向后端传递数组对象

formdata怎么传数组_转换formdata参数格式

weixin_39571404的博客

01-26

8865

在formdata中传递复杂参数时，很头疼，期望是一个样子，结果到了后台又是另一个样子，介绍几个基本的formdata格式传递一个普通的对象obj:{name:'testname',age:'testage'}需要写成这个样子‘obj[name]’:'testname'‘obj[age]’:'testage'传递一个数组arr:['name','age','sex']需要写成这个样子'arr[]'...

使用formData实现内容和文件上传

xiamoziqian的博客

12-02

3847

一、FormData简介 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。二、FormData的主要用途将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。异步上传文件三、FormData的使用 1.基本使用创建一个formDat...

使用formData向后台传递数组对象

tyjlearning的博客

09-19

8335

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

6907

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

ajax使用formData提交文件数组(springMVC接收)

云别

11-28

2788

1. 问题:使用formData提交文件数组在文件上传的部分,由于涉及了不定项input框来上传文件.所以后台接收的部分是没法处理的感觉可以使用一个数组或者list,使用MultipartFile类型来进行接收初始思路: var formData = new FormData() // 存储文件名称的数组 var fileNameList = getAllList(); // 遍历数组,一次...

FormData上传二进制文件、对象、对象数组

Peanutfight的博客

07-30

7403

FormData上传MultipartFile文件；通过表单上传MultipartFile文件与对象；FormData上传对象列表。

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:/"; } ``` 在上面的代码中，我们遍历了文件数组对象，对于每个文件，判断它是否为空，如果不为空，则将文件内容保存到本地磁盘上。最后返回一个重定向到首页的视图。