POST 请求的三种常见数据提交格式 - SegmentFault 思否

post请求：

params：放在请求的url里，后台用@RequestParam接收

body：放在请求的body里，后台接收方式分别如下：

• Content-Type:x-www-form-urlencoded：@RequestParam接收到的是value值 @RequestBody是接收到的键值对
• Content-Type:multipart/form-data：@RequestParam、@RequestBody、@RequestPart 均可
• Content-Type:application/json：@RequestBody才行
• 

1）表单放params里：若后端使用@RequestParam 来接收前端传过来的参数的，Content-Type要设置为application/x-www-form-urlencoded，并且需要对data使用qs.stringify换成键值对的形式；参数放在url body里进行传递

// @RequsetParam请求
const postRequestParam = (url, params, type) => {
  let baseUrl = getBaseUrl(type);
  return axios({
    method: "post",
    url: `${baseUrl}${url}`,
    data: params,
    transformRequest: [//放params里要将data转为k=v&k1=v1(可以用qs库qs.stringify)
      function (data) {
        let ret = "";
        for (let it in data) {
          ret +=
            encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
        }
        return ret;
      }
    ],
    headers: {//放params里要将Content-Type设置为application/x-www-form-urlencoded
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });
};

2）json放body里：若后端使用@RequestBody 来接收前端传过来的参数的，Content-Type要设置为application/json;参数放在body里进行传递  (axios默认放body)

// @RequestBody请求
const postRequestBody = (url, params) => {
  return axios({
    method: "post",
    url: `${base}${url}`,
    data: params,
    headers: { //放body要时，Content-Tpye为application/json，默认值也是这个
      "Content-Type": "application/json",
      charset: "utf-8"
    }
  });
};

3）文件放body里：如果传递的是文件，需设置"Content-Type: multipart/form-data"

使用 FormData() 构造函数，浏览器会自动识别并添加请求头 "Content-Type: multipart/form-data"

实际上是放在body里传递的。

const params = new FormData();
params.append('file', this.file);
axios.post({url,params}) 
//axios.post({url,data:params}) 即使不写data，默认是data放body里