FormData+fetch 提交数据时如何正确格式数据

Question

问题描述

react项目，在fetch下使用FormData对form表单元素进行数据封装后进行post提交至服务器，其格式被转为了WebKitFormBoundary模式，如下图

代码如下：

export function addChapter() {
    return (dispatch) => {
        let data = new FormData(document.getElementById('admin-edit__form'));
        return fetch('/func', {
                method: "POST",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                },
                body: data
            })
            .then(response => response.json())
            .then(json => {
                console.log(json);
            })
            .catch(function(error) {
                console.log('request failed: ', error)
            })
    }
}

若直接使用浏览器原生form表单submit按钮提交，数据格式正常，如下图：

form表单基本代码如下：

<form
    method="post"
    action="/func"
    encType="application/x-www-form-urlencoded"
    id="admin-edit__form"
    className="admin-edit__form"
    onSubmit={e => this.HandleSubmit(e)}
>
   ....
</form>

想请问下是否哪里设置错误了？求大神帮助

Answer 1

Content-Type 去掉即可

Answer 2

一些瞎鸡巴扯淡的答案，验证通过了么？

var searchParams = new URLSearchParams()
searchParams.set('method','next')
fetch('https://www.example.com/', {
  method: 'POST',
  body: searchParams
}).then(function(response){
  console.log(response.json())
})

或者如果不想使用URLSearchParams对象，则需要在headers对象中设置"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",代码如下

fetch('https://www.example.com/', {
  method: 'POST',
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  },
  body: "method=next"
}).then(function(response){
  console.log(response.json())
})

希望这个答案能给后面的人解答。

Answer 3

content－type更改为application/x-www-form-urlencoded
body的参数更改为userName=&password=admin格式的
就可以了。

fetch("http://www.example.org/submit.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "userName=&password=admin"
}).then(function(res) {
  if (res.ok) {
    alert("Perfect! Your settings are saved.");
  } else if (res.status == 401) {
    alert("Oops! You are not authorized.");
  }
}, function(e) {
  alert("Error submitting form!");
});

Answer 4

最后是如何解决的？

Answer 5

reacjs 用 fetch 上传图片, 不可设置 header, 参考https://segmentfault.com/a/11...

Answer 6

Answer 7

点击这里看详情

Answer 8

把headers 注释了 试试

Answer 9

引用之前微风给的答案，这才是正确的，不知道为什么被忽略了

var searchParams = new URLSearchParams()
searchParams.set('method','next')
fetch('https://www.example.com/', {
  method: 'POST',
  body: searchParams
}).then(function(response){
  console.log(response.json())
})

或者如果不想使用URLSearchParams对象，则需要在headers对象中设置"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",代码如下

fetch('https://www.example.com/', {
  method: 'POST',
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  },
  body: "method=next"
}).then(function(response){
  console.log(response.json())
})