无法使用react和nodejs发送和接收表单数据对象

时间:2018-03-22 08:27:57

标签: javascript node.js reactjs express fetch

我正在尝试将表单数据发送到节点js并在那里检索。但是我没有使用表单数据对象。

handleSubmit(data) {
    console.log(data);
    const forms=new FormData();
    forms.append('fname','pranab');
    let promise=fetch('http://localhost:8080/reactTest', {
        method:'POST',
        mode:'CORS',
        body:JSON.stringify(forms),
        headers:{
                'Content-Type':'application/json',
                'Accept':'application/json'
        }
    }).then(res =>res.json()).then(result => console.log(result))
}

在上面的代码中我将表单数据对象发送到服务端。在服务器端,我试图使用下面的代码检索它。

app.post('/reactTest',function(req,res) {
        var contents=req.body;
        console.log(contents);
        return res.send({status:'working'});
    })

但它在控制台中没有显示任何内容。这里的问题是什么?

输出

titech@titech-System-Product-Name:/var/www/html/nodejs$ node index.js
port listening on 8080
{}

当我尝试使用'req.body.fname'来控制它时,它会将'undefined'作为输出代替'{}'。

2 个答案:

答案 0 :(得分:0)

看起来你需要一些函数来将formData转换为JSON。像这样:

function formData2Json(formData){
  let ret={};
  for(let pair of formData.entries()) {
   let val=ret[pair[0]];
   if (!val) {
    ret[pair[0]]=pair[1];
   }
   else {
     if (Array.isArray(val)) {
       val.push(pair[1]);
     }
     else {
       ret[pair[0]]=[val,pair[1]];
     }
   }
  }
  return ret;
}

而不是将body:JSON.stringify(forms)替换为body:JSON.stringify(formData2Json(forms))

答案 1 :(得分:0)

try this it may help

var bodyFormData = new FormData();
bodyFormData.set('userName', 'Fred');

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
})
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });