Как обрабатывать Fetch API FormData представить с помощью ExpressJS - PullRequest
Новая
       38

Как обрабатывать Fetch API FormData представить с помощью ExpressJS

0 голосов
/ 23 января 2020

Поэтому я пытаюсь отправить запрос API api post и formData в API, созданный с использованием expressJS, но он возвращает неопределенное значение после отправки, но когда я попытался использовать почтальон, он успешно получил данные. Я хочу повторить сценарий в почтальоне, используя fetch api, ниже мой код.

Fetch API 

submit.addEventListener('click', ()=> {

    let formData = new FormData();
    let fname = document.querySelector('#fname').value;
    let lname = document.querySelector('#lname').value;
    let email = document.querySelector('#email').value;
    let gender = document.querySelector('#gender').value;

    formData.append('fname', fname);
    formData.append('lname', lname);
    formData.append('email', email);
    formData.append('gender', gender);

    fetch('http://localhost:5000/api/members',  {

        method: 'POST',
        body: formData,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          }
      });


});

Мой ExpressJS Код API 

app.use(cors()); // installed cors just incase
app.use(express.json());
app.use(express.urlencoded({extended: true}));

 app.post('/api/members', (req, res)=> {
      var fname = req.body.fname;
      var lname = req.body.lname;
      var email = req.body.email;
      var gender = req.body.gender;

      console.log(req.body) // i added a consolelog to show body

      connection
      .query(`INSERT INTO userdata (first_name, last_name, email, gender)VALUES('${fname}','${lname}','${email}','${gender}')`,(err, rows, fields) => {
        if(err) throw err
        res.json({msg: `1 rows was inserted`});
      });
 });

Мои настройки почтальона: POST-> BODY-> x- www-form-urlencoded

Edit

Я включил console.log (req.body) в express чтобы показать, что он получает и вывод ниже. 

[Object: null prototype] {
  '-----------------------------47133174525661\r\nContent-Disposition: form-data; name': '"fname"\r\n' +
    '\r\n' +
    'dau\r\n' +
    '-----------------------------47133174525661\r\n' +
    'Content-Disposition: form-data; name="lname"\r\n' +
    '\r\n' +
    'duiasd\r\n' +
    '-----------------------------47133174525661\r\n' +
    'Content-Disposition: form-data; name="email"\r\n' +
    '\r\n' +
    'test@email.com\r\n' +
    '-----------------------------47133174525661\r\n' +
    'Content-Disposition: form-data; name="gender"\r\n' +
    '\r\n' +
    'Female\r\n' +
    '-----------------------------47133174525661--\r\n'
}

1 Ответ

1 голос
/ 23 января 2020

Может быть, вы можете попробовать этот код ниже:

??‍? В вашем Fetch API: 

submit.addEventListener('click', ()=> {

  let fname = document.querySelector('#fname').value;
  let lname = document.querySelector('#lname').value;
  let email = document.querySelector('#email').value;
  let gender = document.querySelector('#gender').value;

  let formData = { fname, lname, email, gender };

  fetch('http://localhost:5000/api/members',  {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
    });
});

? Вы можете прочитать документацию здесь .

Теперь вы можете console.log() сначала. 

app.post('/api/members', (req, res)=> {
  console.log(req.body);
  // do some stuff here
});

Надеюсь, это поможет ?.

...