# node 接值 formdata | x-www-form-urlencoded | json 使用 postman、fetch 傳值

[TOC]

### 1. `application/json`

Headers

"Content-Type": "application/json"

***後端***

套件: body-parser

// node
const bodyParser = require("body-parser");
var bodyParserJSON = bodyParser.json();

api.post("/signup", bodyParserJSON, (req, res) => {
  console.log(req.body);
});

***postman***
選擇 body > raw(json格式)


***前端 fetch***

const fetch = require("node-fetch");
// var FormData = require("form-data");
// var formData = new FormData();

// formData.append("email", "abc123");
fetch("http://127.0.0.1:5000/api/signup", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email: "yay",
    password: "12312",
  }),
})
  .then((res) => res.json())
  .then((json) => {
    console.log(json);
  });

### 2. `application/x-www-form-urlencoded`

***後端***

套件: body-parser

// node
const bodyParser = require("body-parser");
var urlencodedParser = bodyParser.urlencoded({ extended: false });

api.post("/signup", urlencodedParser, (req, res) => {
  console.log(req.body);
});

***postman***
body > x-www-form-urlencoded


***前端 fetch***

const fetch = require("node-fetch");

fetch("http://127.0.0.1:5000/api/signup", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: JSON.stringify({
    email: "yay",
    password: "12312",
  }),
})
  .then((res) => res.json())
  .then((json) => {
    console.log(json);
  });

### 3. `form data`

***後端***

套件: multer

const multer = require("multer");
const upload = multer().single();

api.post("/signup", upload, (req, res) => {
  console.log(req.body);
});

***postman***
選擇 body > raw(json格式)


***前端 fetch***

const fetch = require("node-fetch");
var FormData = require("form-data");
var formData = new FormData();

formData.append("email", "abc123");
fetch("http://127.0.0.1:5000/api/signup", {
  method: "POST",
  body: formData,
})
  .then((res) => res.json())
  .then((json) => {
    console.log(json);
  });