很多时候在使用form向后台发送数据的时候，并不需要使用到表单组件。
例如时间戳、ip等，这个时候除了ajax之外，还可以使用HTML5的一个全新方法FormData；在input[type = file]的文件类型中，很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时，无法赋值给file文件，只能转换为base64类型传送到后台，然后由后台转换为图片再进行服务器存储；此过程较为复杂；
使用formdata，只需创建新的formdata对象，将要发送的数据添加进去，后台即可接收；数据以及文件对象皆可；
此处已图像为例：
方法1：使用form
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>获取</title>
<script src="js/jquery.js"></script>
</head>
<img src="img/1.png" alt="" id="imgs"/>
<form action="" method="" id="myform">
<input type="submit" value="提交" />
</form>
<script>
var imgObj = document.getElementById("imgs");
var myform = document.getElementById("myform");//获取form节点
var myFormData = new FormData(myform);//根据获取到的form节点创建formdata对象；
myFormData.append("name",imgObj);//后台即可根据此name捕获到前台发送的数据或文件；
</script>
</body>
</html>
方法2：使用ajax
var newFormData = new FormData();
newFormData.append("username","张三");
newFormData.append("userPwd","xxxxxxxxx");
$.ajax({
type:"get",
url:"",
async:true,
data:newFormData,
success:function(data){
console.log(data);
});
君凯商联网 - Alex.Ma
很多时候在使用form向后台发送数据的时候，并不需要使用到表单组件。例如时间戳、ip等，这个时候除了ajax之外，还可以使用HTML5的一个全新方法FormData；在input[type = file]的文件类型中，很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时，无法赋值给file文件，只能转换为base64类型传送到后台，然后由后台转换为图片再进行服务器存储；此过程较为复...
最近在前后端联调的时候发现了一个问题，可能自己平时不注意
发送
的内容格式，导致解决问题的路上，走了很多弯路，尤其是在刚刚懂了一点Vue知识之后，
发送
请求的各种花式写法也是让人头大，我在这把我踩到的坑给大家介绍一下吧。
这个问题是我前端登录的时候向后端发生post请求。在
使用
这个接口前，我
使用
postman 确认过了几次，接口传参是没有问题的，而且
使用
params或者body传参都是能接收到的。然而还是报错了……我们先来看看一个截图吧。
我向后端发参数的时候无论如何我都接不到
数据
，然后我就开始各种怀疑和猜测
( a )后端接口问题
如果是后端接口问题，那么我用postm
vue框架推荐
使用
axios来
发送
ajax请求，之前我还写过一篇博客来讲解如何在vue组件中
使用
axios。但之前做着玩用的都是get请求，现在我自己搭博客时
使用
了post方法，结果发现
后台
（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。
post提交
数据
的四种编码方式
1.application/x-www-form-urlencoded
这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中，可以用$_POST[“key”]的方式获取到key的值，在node中我们可以
使用
querystring
项目场景：
后端：实现了一个文件上传服务接口，可以接收前端传递过来的MultipartFile文件，并存储到服务器本地中。
前端：获取type为file的<font>标签中的文件，
使用
axioshttp请求库，
发送
post请求，将文件
发送
给后端。
在js中
发送
上传文件请求的常规代码如下：
new一个
FormData
对象，
使用
append方法将文件添加到表单中
FormData
专门用于js中
发送
multipart/form-data格式请求
append方法的key为表单中的name
1. fromdata中所有的参数都是数组
2.之所以在浏览器中看到有些参数是以对象传递给后端的，是因为，如果参数数组中只有一个对象，那么在浏览器中默认显示的是对象格式，但实质上只是这个数组的第0个索引
3.所以在传递给后端的时候，需要JSON.stringfy( )，因为在fromdata中赋值的时候，并不能将一个对象直接赋值给这个属性，否则就会出现[0]: 'object object'
所以其实我一直不懂fromdata对象，以至于我今天需要将两个参数传递给后端的时候，直接将对象赋值给属
向
后台
接口传递
FormData
格式的数组对象
在js中，new
FormData
() 对象后，可以通过 append(name, value) 的方式往该对象中添加添加
数据
。然而append的值只能是字符串或者文件的格式，对于复杂的数组中包含对象的
数据
怎么添加呢？下面是我
使用
的方法：
后台
接口要求的入参格式：
<input type="text" name="title"/>
<input type="file" name="file"/>
<input type="te
将本地
数据
（.xlsx、.docx等文件）上传或导入
数据
库，有时候需要
使用
FormData
对象。
FormData
对象，可以把所有表单元素的name与value组成一个queryString,提交到
后台
。
一、创建对象：
创建一个
FormData
对象实例
1、常用的创建
let
formData
= new
FormData
();
2、vue中的创建
let
formData
= new window.
FormData
();
3、在表单的基础上创建
<form id="fromCont" acti
文章目录
FormData
发送
一个简单的表单
FormData
方法
发送
带有文件的表单
发送
具有 Blob
数据
的表单总结
FormData
这一章是关于
发送
HTML 表单的：带有或不带文件，带有其他字段等。
FormData
对象可以提供帮助。你可能已经猜到了，它是表示 HTML 表单
数据
的对象。
构造函数是：
let
formData
= new
FormData
([form]);
如果提供了 HTML form 元素，它会自动捕获 form 元素字段。
FormData
的特殊之处在于网络方法（netw
在前端可以
使用
`<input type="file">`来上传文件，然后
使用
`
FormData
`对象将文件
数据
转换为`multipart/form-data`格式，通过`XMLHttpRequest`或`fetch`等方式
发送
给
后台
。具体实现可以参考以下示例代码：
```html
<form id="myForm">
<input type="file" name="file">
<button type="submit">上传</button>
</form>
```javascript
const form = document.getElementById('myForm');
const
formData
= new
FormData
(form);
fetch('/upload', {
method: 'POST',
body:
formData
.then(response => {
console.log('上传成功！');
.catch(error => {
console.error('上传失败：', error);
在
后台
接收文件
数据
时，可以
使用
`MultipartFile`类型来接收。例如在Spring框架中，可以在Controller中定义一个接口方法来处理上传请求：
```java
@PostMapping("/upload")
public String handleUpload(@RequestParam("file") MultipartFile file) {
// 处理上传文件
数据
return "success";
其中`@RequestParam("file")`表示接收名为`file`的文件
数据
。在处理文件
数据
时，可以
使用
`file.getInputStream()`方法获取文件输入流，并进行相应的处理。
