Formdata仅发送第一个对象的名称
FormData 是一种用于构建一组键值对来表示表单字段和其值的对象，它可以方便地将数据发送到服务器。当使用 FormData 发送多个对象时，如果仅发送了第一个对象的名称，可能是由于以下原因：
原因分析：
- 循环遍历问题：在将对象添加到 FormData 时，可能没有正确地遍历所有对象。
- 对象格式问题：对象本身的格式可能不正确，导致只有第一个对象被识别和处理。
- 代码逻辑问题：在处理 FormData 的代码逻辑中，可能存在错误，导致只处理了第一个对象。
解决方法：
以下是一个示例代码，展示如何正确地将多个对象添加到 FormData 中并发送：
// 假设有一个包含多个对象的数组
const data = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
// 创建一个新的 FormData 对象
const formData = new FormData();
// 遍历数组并将每个对象添加到 FormData 中
data.forEach((item, index) => {
formData.append(`name[${index}]`, item.name);
formData.append(`age[${index}]`, item.age);
});
// 使用 fetch API 发送 FormData
fetch('https://example.com/api', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));解释：
- 创建 FormData 对象：使用
new FormData()创建一个新的 FormData 对象。 - 遍历数组：使用
forEach方法遍历包含多个对象的数组。 - 添加数据到 FormData：使用
formData.append方法将每个对象的属性添加到 FormData 中。注意，这里使用了[index]来区分不同的对象。 - 发送数据：使用
fetchAPI 发送 FormData 到服务器。
参考链接：
通过这种方式，可以确保所有对象都被正确地添加到 FormData 中并发送到服务器。
相关·内容
您好，朋友们，我在angular 4中创建了一个项目，我想上传一个图像并向PHP文件发送请求，但表单数据不能附加值和图像。请帮助我我包括FormGroup，FormControl，FormBuilder，验证器，Http
const Image = this.com_Image.nativeElement;
if (Image.files && Image.files[0]) {
this.comImageFile = Image.files[0];
}
const ImageFile: File = this.comImageFile;
// [enter image
浏览 2提问于2018-09-06得票数 1
1回答
所以我有一个问题，我有一个像这样的对象： {
name: "",
layers: [{
name: "",
traits: [{
name: "",
file: File
}]
}]
} 问题是，我不能只是JSON.stringify(data)，做一个formData.append()，然后把它发送到后端，因为File不能被烧焦。 我还看到了发送一组图像的答案，比如： formData.append("image", file1)
for
浏览 36提问于2021-09-09得票数 1
回答已采纳
1回答
我在php中想要完成的事情如下：
$var->doSomething(['chris' => ['age' => 22], 'evan']);
我通过formData发送了一个数组(显然不像上面的问题)，php完全可以这样读取数组：
$array = $_POST('arrayOfValues');
$var->doSomething($array);
我的js formdata上的数据如下：
var array = ['chris', 'evan'];
var data =
浏览 13提问于2018-07-21得票数 1
回答已采纳
我正在向asp.net mvc中的web api控制器发送表单数据，但是每次收到上述错误时，我的ajax请求都不会命中控制器。请告诉我如何将asp.net mvc中的ajax文件的请求发送到web api控制器。
$(document).on("submit", ".SignupForm", function (event) {
event.preventDefault();
var formData = new FormData($(".SignupForm"));
formData.append($('#ima
浏览 0提问于2017-01-29得票数 5
我在客户端使用Bootstrap/jquery。在服务器端，我使用的是node.js，其格式如下： <form id="signupform" action="">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
浏览 21提问于2021-07-28得票数 1
回答已采纳
我试图用Ajax请求将带有表单数据的数组发送到操作中，但是每当我收到表单数据和空数组时，我都会接收到。
$scope.SubmitForm = function () {
var sLangs = $("#supportedLanguages").data("kendoMultiSelect").value();
var formdata = new FormData($('#frmAppSettings').get(0));
alert(formdata.SelectedLanguag
浏览 1提问于2016-10-30得票数 5
回答已采纳
我使用ui-路由器将一个对象传递到另一个状态，并使用
$state.go()
但是，用于console.log对象的$stateParams显示为未定义。该对象由x和y坐标组成，它们是0到20之间的简单整数值。当我console.log userData在EnterCtrl中，我得到正确的变量，所以我假设正确的信息被发送。
我在这里看过很多例子，尝试过很多选择，但我无法让它发挥作用。怎样才能让$stateParams被CanvasCtrl看到
EnterCtrl使用$state.go传递userData对象
myMap.controller('EnterCtrl',['
浏览 5提问于2017-04-18得票数 0
回答已采纳
我在formData上有：
Content-Disposition: form-data; name="property-photos"; filename="Screen Shot 2017-12-22 at 10.31.21 AM.png"
Content-Type: image/png.
这是由多个文件文件输入发送的。
我有三张标签为property-photos的照片，希望使用for循环将它们更改为PropertyPhoto1、PropertyPhoto2和PropertyPhoto3
如何使用formData.set来改变这种情况？
我原以为这是类似于
浏览 0提问于2018-01-19得票数 4
回答已采纳
我尝试通过$POST发送数据，并将数据传递并推入数组，然后写回json文件。我的问题是在数组推送中，我认为我需要一个foreach来访问array_push，这样当json数据被写入文件时，然后在下一个$POST被发送时重新导入该文件，它将全部嵌套在相同的json dict下。但正如您从我的check.json文件中看到的，我没有任何运气。先谢谢你...
test11.php
<?php
$code = $_POST['code'];
$cpu = $_POST['cpu'];
$formdata = array($code=> $cpu);
浏览 13提问于2016-08-05得票数 0
回答已采纳
1回答
我正在尝试上传多个文件，使用FormData作为一个包含文件和其他必要属性的对象数组，但我没有得到预期的结果。
import api from './api';
const formData = new FormData();
// File input with multiple attribute
const files = this.$refs.photo.files;
if (files.length > 0) {
for (let i = 0; i < files.length; i++) {
formData.append('f
浏览 1提问于2021-10-14得票数 0
回答已采纳
1回答
我使用ajax将多个表单数据作为formdata对象发送到python烧瓶。就像这里的例子。
在下面的代码中，我使用ajax发送两种形式的数据。我无法在服务器端检索它，但是我设法在python上使用request.files获取文件。
但是，我无法检索或看到附加到具有id " form -2“的ajax请求的表单数据对象。
如何才能在后端看到第二种形式的输入值。
<html>
<body>
<form id="form1">
<input type="file" name="file[]"
浏览 4提问于2022-10-16得票数 0
回答已采纳
我有一张表格，可以从最终用户那里获取营业时间和关门时间。用户可以输入多个营业时间和关门时间的值。问题是我只得到了数组中时间的第一个值，而不是所有输入的值。如何使用Formdata将数组值发送到我的控制器？
刀片
<form>
<input name="closing_time[]" id="closing_time" placeholder="18:00" />
.......
</form>
JavaScript
.....
formData.append("closing_t
浏览 0提问于2020-09-12得票数 0
我正在使用Aurelia Fetch Client向Web API端点发送文件上载请求。但是所有的磁贴IFormFile都是空的。我的代码如下。
客户端
const formData = new FormData();
formData.append("files", account.statement);
const response = await this.http.fetch(url, { method: "POST", body: formData
});
Web API端点
[HttpPost]
public IActionResult Save
浏览 0提问于2017-05-10得票数 5
我有这个提交代码，
$('#form').on('submit',function (e) {
e.preventDefault();
//var file = $("#productImg");
var fileUpload = $("#productImg").get(0);
var files = fileUpload.files;
var form = $("#form");
var formData = new FormData();
formD
浏览 3提问于2016-08-01得票数 3
回答已采纳
1回答
我需要上传一个文件到API-Gateway。在添加了一些元信息之后，文件应该被发送到另一个(微)服务(作为Content-Type: multipart/form-data)。在API-Gateway中构建FormData对象时遇到了一些问题。我不想将文件持久化在网关上，所以我基本上只是尝试传递它。 为了创建formData对象，我使用了Form-Data 这是一个尝试的结果： // Controller
@Post()
@UseInterceptors(FileInterceptor('file'))
async create(@Res()
浏览 67提问于2019-09-13得票数 8
回答已采纳
我是第一个反应的人，不知道是否允许这样做：
我想收集表单数据和发送请求与这样的数据在一个模式。
我还希望输入字段具有来自现有数据(props.itemInfo)的默认值。
我正在尝试初始化formData
function Parent() {
const [state, setState] = useState(false);
const [itemInfo, setItemInfo] = useState({})
// itemInfo get from somewhere in the middle
return (
<div>
<
浏览 4提问于2022-10-06得票数 0
回答已采纳
我需要发送一个图像和一些细节作为形式数据的反应-本机。
为此，我使用了axios post方法。
这是我的代码：
const formData = new FormData();
formData.append('taskId', taskId);
formData.append('taskName', taskName);
formData.append('projectId', projectId);
formData.append('projectName', projectName);
formData.append(&
浏览 6提问于2021-06-22得票数 2
回答已采纳
当我尝试使用文件从烧瓶发送一个post请求时，这个文件是通过客户端的ajax请求接收的，我得到了一个例外：“太多的值要解包(预期的2)
我有一个客户端应用程序上传一个文件(Javascript)。
我有我的服务器代码，它充当处理所有外部服务器调用的代理。上传的文件将作为来自客户端的post请求发送到此服务器。
现在，我需要使用python中的请求模块，将服务器中接收到的这个文件作为post请求发送到外部服务器。
当我做第三步的时候，我被困在一个例外。我不确定这是否是正确的方式张贴这样的文件，因为我是新的瓶。请提供一些可能有帮助的投入。
客户端代码
$(‘inputtyp
浏览 0提问于2019-08-02得票数 0
1回答
我需要一份表格。我设法做到了，但当我提交其中一个，它提交他们全部。
我的控制器向小枝模板发送一组表单。
首先实例化我的所有表单：
$forms = [];
foreach ($data as $index => $something)
{
// create form
$formData = new FormData($data);
$forms[$index] = $this->createForm(MyForm::class, $formData);
}
浏览 0提问于2018-03-08得票数 3
回答已采纳
1回答
C#模型类
public class SubCategoryTwoViewModel
{
public long Id { get; set; }
public string SubCatTwoName { get; set; }
public CategoryViewModel Category { get; set; }
public SubCategoryOneViewModel SubCatOne { get; set; }
public string PictureUrl { get; set; }
public List<IFo
浏览 3提问于2017-04-21得票数 2
我正在尝试上传一个后端的vue和laravel的图像。在我遇到问题之前，一切都很顺利。当我发出一个仅将formData作为参数发送的axios调用时，我的图像会被发送。
let formData = new FormData();
formData.append("image", this.image);
axios.post('url',formData)
但是对于axios请求，我想发送一个对象，而不仅仅是formData，类似于：
const myObj={ name:'hello','shop_id':2, imag
浏览 1提问于2020-08-29得票数 0
请考虑以下几点：
PHP：
<form id="f-submit" method="post" action="">
<button class="btn-submit" name="update" type="submit">APPROUVE</button>
</form>
jQuery：
$("button.btn-submit").click(function(event) {
event.preventDe
浏览 1提问于2015-04-07得票数 0
回答已采纳
3回答
我提出了一个上传图片到网站的帖子请求。
在页面中，有一个FileUpload和一个input (textBox)，在fiddler中，我发现页面正在使用多部分Post请求模式(Content Disposition: multipart-formdata;)发送一些数据
一切似乎都很好，因为在fiddler中，我的应用程序发布的内容和页面发送的内容都是一样的……只是不是关于头的顺序...
我的问题是，以正确的顺序放置标题真的很重要吗？如果是，我该怎么做呢？(因为我们只是在请求中设置一些属性，所以没有位置来设置顺序...)
谢谢你的建议...
浏览 2提问于2012-06-26得票数 1
回答已采纳
1回答
如何将图像文件发送给django。
我是刚开始react和django的人，目前我正在成功地从端点发送和获取数据，现在我想将图像文件或任何其他文件从react发送到django或将图像文件从django发送到react。我编写了一些代码，但它不能正常工作，而且我在发送文件时面临相当大的困难，我研究了但没有得到任何有用的link.Kindly可以共享链接，在这里我可以更好地理解它下面的works.Here是如何的。
反应部件
let doc=new JsPDF();
doc.addImage(img,'JPEG',30,30);
//do
浏览 0提问于2019-04-18得票数 0
因此，我试图在服务器端发送与模型匹配的数据。我的js代码如下：
vm.answers={}
vm.formData = {answers:vm.answers};
vm.continue=function(){
$location.path('profiles')
if(user=='employer'){
$scope.json = angular.toJson(vm.formData);
questionService.postPostingAnswers($scope.json).th
浏览 4提问于2017-09-18得票数 0
3回答
如何在formData中传递数组
、、、、
我正在使用formData，并试图传递一个在.Net核心后端接收它的数组，这是我尝试发送truck.StateTruck的数组：
{
0: {StaId: 6}
1: {StaId: 7}
2: {StaId: 8}
3: {StaId: 9}
}
这是我发送数据的方法，我尝试只发送StaId及其值：
let formData = new FormData();
formData.set('DriId',truck.DriId);
formData.set('TruExdate',truck.TruExdate);
formData.set(&#
浏览 0提问于2020-11-23得票数 0
这看起来很愚蠢，但我似乎无法理解这些文档。我说的是用于文件上传的插件。
现在，根据文档，有一个选项：
formData
可以使用此选项设置随文件上载一起发送的其他表单数据，该选项接受具有名称和值属性的对象数组、返回此类数组的函数、FormData对象(用于XHR文件上载)或简单对象。给出了第一个fileInput的形式作为函数的参数。
备注：当multipart选项设置为false时，其他表单数据将被忽略。
类型:数组、对象、函数或FormData默认值:将表单字段作为序列化数组返回的函数：
函数(窗体){返回form.serializeArray()；}
示例：
{名称：'a
浏览 7提问于2012-10-23得票数 4
回答已采纳
1回答
我正在尝试使用gem活动存储将图像上传到rails API，并将其作为FormData通过Vue应用程序发送。然而，即使所有参数都被发送，它也会给出一个param is missing or the value is empty错误。
Vue Js (组件)
async onSubmit(e){
const formData = await new FormData()
formData.append('name', this.name)
formData.append('description', t
浏览 2提问于2020-06-19得票数 0
我无法检索从客户端发送到服务器的数据。
我的反应代码如下：
axios.post('http://localhost:5000/post-entry', { data: formData })
.then(res => {
console.log(res);
})
我的服务器代码如下：
app.post('/post-entry', (req, res) => {
console.log(req.data, "res.body.data here");
});
当它到达我服务器上的post时，日志是undefined。
我做错
浏览 4提问于2022-05-14得票数 0
回答已采纳
我有3个对象，1º->数据用户(姓名，dni等)，2º数据汽车(颜色，价格等)其他数据。
如果我想用Angular 2+ ->发送此数据
return this.http.post(url, dataUser, dataCar, otherData, { responseType: 'text' });
我收到错误，因为我只能发送1个数据...但我需要发送2到3个或更多...
然后我使用->
this.formData = new FormData();
this.formData.append("dataUser", new Blob
浏览 8提问于2018-09-03得票数 1
回答已采纳
我一直在非常努力地为我在大学的一门课程的期末项目做一个网站。我很难理解为什么我的$.ajax POST请求将NULL发送到我的服务器，而它应该(和过去使用)发送我上传的文件的名称。
下面是我的客户端的代码
$('#upload-file').on('change', function (e) {
let uploadname = e.target.files[0].name;
console.log("ICS NAME "+ e.target.files[0].name);
let icsFlag
浏览 2提问于2019-04-06得票数 1
我使用filter_input(INPUT_POST, 'attribute')和$_POST['attribute']得到了不同的结果，我不知道为什么会发生这种情况。
Post请求由使用JQuery构建的JavaScript发送，如下所示：
// type javaScript
var formData = {
field_a: "valueA",
field_b: "",
field_c: undefined
};
$.ajax({
url: 'serverAddress',
data: {
浏览 18提问于2017-01-18得票数 1
回答已采纳
2回答
从本文开始，我要做的是获取由aspnet/html表单发送的键值对，然后将它们放入dto中，然后我可以在应用程序的其他地方使用它们。我在foreach循环中看到了这一点。
public async Task<HttpResponseMessage> PostFormData()
{
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string root = HttpContext.
浏览 19提问于2017-02-20得票数 0
回答已采纳
我正在尝试发送两个JSON列表，一个DateTime，int，string， 和文件通过JQuery AJAX POST请求发送到C#控制器。 除了两个对象数组外，所有数据都可以正常发送，它们不发送任何内容。 我尝试将它们从一个对象列表更改为一个字符串列表进行转换，但是该数组是作为一个长字符串接收的，这使得它不能通过Newtonsoft.Json中的JsonConvert进行转换。 我已经尝试记录formdata对象，以检查它们的有效性，它们在控制台中似乎没有问题。我不完全确定我哪里搞砸了。 这是我的JS var formData = new FormData();
formData.app
浏览 121提问于2019-02-18得票数 0
回答已采纳
2回答
我有一个rest客户端，它发送多部分表单数据。我正在发送一个图像作为“应用程序/八位流”。图像类型为JPEG。
在REST服务中，我应该如何正确地接收这个信息？
目前，我正以InputStream的身份接收它。我把这个输入流转换成一个文件，但是我无法打开it.It，error in jpeg说，同时我试图打开它。
输入流到文件转换逻辑
File image=File.createTempFile("image", ".JPEG");
FileUtils.copyInputStreamToFile(inputStream, image);
为了清晰起见，我将共享r
浏览 3提问于2015-12-03得票数 1
回答已采纳
我试图通过一个post方法从一个离子前端应用程序向Spring启动中的后端服务发送一个映像。
我已经完成了这样的方法，使post与FormData对象中的图像一起发送到后端url：
uploadImageService(url: string, image: any) {
console.log('post service: upload Image', + url);
// Initiates a FormData object to be sent to the server
const fd: FormData = new FormDat
浏览 0提问于2019-04-25得票数 3
回答已采纳
我一直在尝试做一个网页，一些简单的东西，只是为了弄清楚我的方向，因为我是一个真正的新手，当涉及到所有与网络相关的事情时。
我有一个HTML格式的主页和一个表单，允许用户上传一个文件，一个执行上传的Python脚本，最后是一个从表单中获取数据并将其发送到Python脚本的Javascript文件。
Javascript代码如下：
document.forms[0].onsubmit = function(ev){
ev = ev || event;
ev.cancelBubble = true;
ev.returnValue = false;
}
if (window.
浏览 3提问于2012-09-16得票数 0
我使用像这样的对象文本方法将formData发送到后端(它必须是这样的)：
var formData = {};
formData.patentID = caseSelected.patentID;
formData.clientRef = data.clientRef;
formData.amendedDoc = data.amended.amendedDoc;
当请求发出时，会出现一个错误。当我查看请求有效负载时，formData.amendedDoc并没有发送附加的PDF，而是提供了如下所示的空对象：
如果我在发送http请求之前记录formData，我可以看到
问题
如何将P
浏览 3提问于2020-11-19得票数 0
1回答
我有一个函数可以上传多个图像并发送到服务器：
const handleFileChange = (e) => {
const images = e.target.files;
const formData = new FormData();
formData.append('image', images);
if (images) {
dispatch(uploadProductImage(formData));
}
};
但是，在分派时，发送的有效负载是图像
浏览 3提问于2022-10-24得票数 1
回答已采纳
2回答
当将表单数据发送到我的node.js后端时，我得到了一个400错误。它也给了我这个错误：Unexpected token - in JSON at position 0，我知道我的节点应用程序没有问题，因为我可以使用Postman发送相同的数据，而且它工作得很好。
这是我的角度法：
const formData = new FormData();
formData.append("db", $scope.item.db.toLowerCase());
formData.append(
"collection",
浏览 7提问于2022-02-20得票数 0
回答已采纳
我有一个多选择的输入。如果ı选择任何选项并发送无问题。不选择任何值时。然后用空数组发送表单。但formData不接受[]。
let formData = new FormData();
formData.append('education_level', []); //not accept
浏览 2提问于2022-02-05得票数 0
回答已采纳
3回答
我需要使用ajax和FormData发送一些数据，因为我想发送一个文件和一些其他参数。我通常发送数据的方式是这样的：
$.ajax({
type: 'POST',
url: 'some_url',
dataType: 'json',
processData:false,
contentType:false,
data:{
Lvl_1-1: 'something',
Lvl_1-2: 'something',
浏览 0提问于2015-02-28得票数 17
回答已采纳
我已经在angular中创建了一个前端应用程序，并使用HTTP服务方法向服务器发送请求(包含node.js代码)。在前端，我创建了一个csv文件，该文件保存在angular组件的相同目录中。我希望使用node.js服务方法将文件发送到服务器(包含HTTP代码)。我创建了以下代码：
客户端(前端)代码，用angular.js开发：
uploadCSVFileOnServer(){
let file = new File([""], "./abc.csv"));
let formData = new FormData();
formData.
浏览 15提问于2019-11-12得票数 0
回答已采纳
1回答
我在我的VueJs项目中使用Vuetify，我需要从我上传文件(CSV)的表单中发送数据，并获得一些数字输入。我需要用Axios做到这一点。
我试过做一些事情，但总是得了404分。
这是我的Vuetify代码：
<v-form>
<v-container>
<v-row>
<v-file-input
show-size
counter
multiple
label="Na
浏览 11提问于2019-11-09得票数 1
我想向PHP页面发送一个FormData值和一些字符串值。
这里是我在JS端的代码：
$.ajax({
url: 'upload-pic.php',
type: 'post',
data: {
type : type,
id : id,
formData : formData
},
processData:false,
su
浏览 2提问于2015-10-22得票数 1
回答已采纳
我有一个ajax查询将表单“有一个上传文件输入”发送到一个php文件，
要发送这样的formData文件，请执行以下操作：
var formData = new FormData();
var file = $("#logo").get(0).files[0];
formData.append("logo", file);
我还有其他的输入值，比如名字，密码，电子邮件……下面是我为此创建的对象：
{name:name, email:email, password:password, auth:auth}
因此，我在这里询问如何将formData +这个对象作为a
浏览 4提问于2014-08-17得票数 1
回答已采纳
我构建了带有文件上载的自定义React/Gatsby多部分表单，并希望将所有表单数据发送到WordPress端点，将文件上载到特定文件夹，并在WordPress后端显示所有数据。
我就是这样发送数据的：
const {
stepOne,
stepTwo,
} = useContext(FormStepProvider)
const steps = {
stepOne: stepOne,
stepTwo: stepTwo,
}
const postData = async () => {
const formData = new
浏览 0提问于2021-09-10得票数 0
回答已采纳
2回答
我使用图表已经有很长一段时间了，我尝试过很多不同的框架。
我试过Canvas.js，Highcharts，然后我换成了Google Chart。一切都很好，除了我不能让这些图表以某种方式转换为画布，或者只是通过AJAX发送URI，所以在服务器端，我可以将其插入到PDF。
当我使用console.log "data“时，我可以在我的console.log中看到"FormData{}”，但是AJAX请求从来不会发送到PHP。
这是我的脚本：
function chartTwo() {
var data = google.visualization.arrayToDataTa
浏览 0提问于2017-08-03得票数 1
我有以下API请求：
我有一个问题，就是如何在有技能的地方对数组部件建模。
所以，好的，它是带有项的数组类型，但是如何在swagger中对名称部分建模呢？会是什么样子？我试过以下几种方法：
- in: formData
name: skills
type: array
items:
type: string
但是，您如何建模id部分，例如？
------------------------------EDIT
按照建议，我实施了以下措施：
parameters:
- $ref: '#/paramete
浏览 3提问于2021-08-30得票数 2
我使用请求npm使用节点js发送HTTP请求。一旦请求方法被调用，我需要重定向到其他页面，但它不能工作。
request({
headers: {
'Accept': 'application/vnd.api+json',
'Content-Type': 'application/vnd.api+json',
'Authorization': 'Bearer
浏览 0提问于2018-11-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
