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

所以下面的工作:

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

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

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

为了补充上述好的答案，你也可以避免在HTML中显式设置动作，并使用javascript中的事件处理程序，使用"this"作为表单来创建"FormData"对象

Html表格:

<form id="mainForm" class="" novalidate>
<!--Whatever here...-->
</form>

在JS中:

$("#mainForm").submit(function( event ) {
  event.preventDefault();
  const formData = new URLSearchParams(new FormData(this));
  fetch("http://localhost:8080/your/server",
    {   method: 'POST',
        mode : 'same-origin',
        credentials: 'same-origin' ,
        body : formData
    })
    .then(function(response) {
      return response.text()
    }).then(function(text) {
        //text is the server's response
    });
});

"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
    )
  }

使用FormData和fetch来抓取和发送数据

fetch(form.action, {method:'post', body: new FormData(form)});

函数send(e,form) { fetch(形式。action，{方法:'post'， body: new FormData(form)}); console.log('我们异步发送帖子(AJAX)'); e.preventDefault (); ｝ <form method="POST" action="myapi/send" onsubmit="send(event,this) "" > <input hidden name="csrfToken" value="a1e24s1"> <input name="email" value="a@b.com"> <input name="phone" value="123-456-789"> < input type = " submit " > > < /形式 在chrome控制台>网络之前/之后“提交”

Content-Type: " multipart /form-data"

const formData = new FormData(document.getElementById("form"))

fetch("http://localhost:8000/auth/token", {
  method: "POST",
  body: formData,
  headers: {
    "Content-Type": "multipart/form-data"
  }
})

Content-Type: "application/x-www-form-urlencoded"

const formData = new URLSearchParams(new FormData(document.getElementById("form")))

fetch("http://localhost:8000/auth/token", {
  method: "POST",
  body: formData,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
})

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);
    });