js异步提交表单使用不同参数对象

  1. 使用multipart/form-data请求头
  2. 使用application/x-www-form-urlencoded请求头
  3. 使用application/json请求头

一、使用multipart/form-data请求头

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 使用axios.js发起请求

let formData = new FormData()
formData.append('key', 'v')
$http.post('/api/', formData).then(res => {
     console.log(res)
})


// 使用umi-request发送请求
const formData = new FormData();
formData.append('file', file);
request('/api/v1/some/api', { method: 'post', data: formData });

// 或者更改参数requestType：formData

二、使用application/x-www-form-urlencoded请求头

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import querystring from 'querystring'



// 使用umi-request发送请求
request({
    url: '/api',
    method: 'post',
    data: querystring.stringify(data),
    headers: { 'Content-type': 'application/x-www-form-urlencoded' }
})
// 或者直接更改requestType为form
request('/api', {
    method: 'POST',
    headers: {
     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    },
    requestType: 'form',
    data: {
      ...params,
    },
});

三、使用application/json请求头

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 使用axios.js发起请求
// 直接传递json对象
$http.post('/api/', {key:value}).then(res => {
     console.log(res)
})


// 直接传递或者添加requestType：json

request('/api', {
    method: 'POST',
    headers: {
     'Content-Type': 'application/json;charset=UTF-8',
    },
    requestType: 'josn',
    data: {
      ...params,
    },
});