客户端

不要设置内容类型标头。

// Build formData object.
let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData",
    {
        body: formData,
        method: "post"
    });

服务器

使用FromForm属性指定绑定源为表单数据。

[Route("api/[controller]")]
public class SampleDataController : Controller
{
    [HttpPost]
    public IActionResult Create([FromForm]UserDto dto)
    {
        return Ok();
    }
}

public class UserDto
{
    public string Name { get; set; }
    public string Password { get; set; }
}

引用FormData上的MDN(重点是我的):

FormData接口提供了一种方法，可以轻松地构造一组表示表单字段及其值的键/值对，然后可以使用XMLHttpRequest.send()方法轻松地发送这些字段。它使用与编码类型设置为“multipart/form-data”的表单相同的格式。

所以当你使用FormData时，你就把自己锁在了multipart/form-data中。没有办法将FormData对象作为主体发送，而不以multipart/form-data格式发送数据。

如果你想要以application/x-www-form-urlencoded的形式发送数据，你必须将主体指定为url编码的字符串，或者传递一个URLSearchParams对象。不幸的是，后者不能直接从表单元素初始化。如果你不想自己遍历你的表单元素(你可以使用HTMLFormElement.elements)，你也可以从FormData对象创建一个URLSearchParams对象:

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

注意，您不需要自己指定Content-Type标头。

正如monk-time在注释中所指出的，你也可以创建URLSearchParams并直接传递FormData对象，而不是在循环中追加值:

const data = new URLSearchParams(new FormData(formElement));

不过，在浏览器中仍然有一些实验性的支持，所以在使用它之前一定要进行适当的测试。

"body:FormData"工作，但有类型投诉，也"FormData"设置多部分头。为了让事情更简单，"body:URLSearchParams"可以使用内联结构和手动设置的头部:

function getAccessToken(code) {

    return fetch(tokenURL, 
        {
            method: 'POST',
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded',                 
               'Accept': '*/*' 
            },            
            body: new URLSearchParams({
                'client_id':clientId,    
                'client_secret':clientSecret,
                'code':code,    
                'grant_type': grantType,
                'redirect_uri':'',
                'scope':scope
            })
        }
        )
    .then(
        r => return r.json()
    ).then(
        r => r.access_token
    )
  }

客户端

不要设置内容类型标头。

// Build formData object.
let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData",
    {
        body: formData,
        method: "post"
    });

服务器

使用FromForm属性指定绑定源为表单数据。

[Route("api/[controller]")]
public class SampleDataController : Controller
{
    [HttpPost]
    public IActionResult Create([FromForm]UserDto dto)
    {
        return Ok();
    }
}

public class UserDto
{
    public string Name { get; set; }
    public string Password { get; set; }
}

MDN上有一些说明，浏览器将自动处理Content-Type:

如果字典中没有设置内容类型头，请求也会自动设置一个内容类型头。

所以当我们发送一个取回请求时，我们不需要指定'content-type'。

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});

如果在头文件中设置content-type。浏览器将不会尝试分割请求有效负载中的表单数据。

我使用fathcer来处理FormData，与XHR的行为相同。

import { formData } from '@fatcherjs/middleware-form-data';
import { json } from '@fatcherjs/middleware-json';
import { fatcher } from 'fatcher';

fatcher({
    url: '/bar/foo',
    middlewares: [json(), formData()],
    method: 'PUT',
    payload: {
        bar: 'foo',
        file: new File()
    },
    headers: {
        'Content-Type': 'multipart/form-data',
    },
})
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.error(error);
    });

使用fetch api，你不需要包含“Content-type”:“multipart/form-data”的头文件。

所以下面的工作:

let formData = new FormData()
formData.append("nameField", fileToSend)

fetch(yourUrlToPost, {
   method: "POST",
   body: formData
})

注意，对于axios，我必须使用content-type。