axios post 请求发送表单数据
axios post request to send form data
axios POST
请求命中控制器上的 url 但将空值设置为我的 POJO class,当我在 chrome 中使用开发人员工具时,有效负载包含数据。我做错了什么?
Axios POST请求:
var body = {
userName: 'Fred',
userEmail: 'Flintstone@gmail.com'
}
axios({
method: 'post',
url: '/addUser',
data: body
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
浏览器响应:
如果我将 headers 设置为:
headers:{
Content-Type:'multipart/form-data'
}
请求抛出错误
Error in posting multipart/form-data. Content-Type header is missing boundary
如果我在邮递员中发出相同的请求,它工作正常并为我的 POJO 设置值 class。
任何人都可以解释如何设置边界或如何使用 axios 发送表单数据。
您可以 post 使用 FormData() 的 axios 数据,例如:
var bodyFormData = new FormData();
然后将字段添加到您要发送的表单中:
bodyFormData.append('userName', 'Fred');
如果您要上传图片,您可能需要使用 .append
bodyFormData.append('image', imageFile);
然后就可以使用axios post方法(可以相应修改)
axios({
method: "post",
url: "myurl",
data: bodyFormData,
headers: { "Content-Type": "multipart/form-data" },
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
相关 GitHub 问题:
Can't get a .post with 'Content-Type': 'multipart/form-data' to work @ axios/axios
上传(多个)二进制文件
Node.js
当您想通过 multipart/form-data
访问 post 文件时,事情就变得复杂了,尤其是多个二进制文件。下面是一个工作示例:
const FormData = require('form-data')
const fs = require('fs')
const path = require('path')
const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
headers: formData.getHeaders()
})
- 而不是
headers: {'Content-Type': 'multipart/form-data' }
我更喜欢headers: formData.getHeaders()
- 上面我用的是
async
和await
,不喜欢可以改成普通的Promise语句
- 为了添加您自己的 headers,您只需
headers: { ...yourHeaders, ...formData.getHeaders() }
新增内容如下:
浏览器
浏览器的 FormData
与 NPM 包 'form-data' 不同。以下代码在浏览器中对我有用:
HTML:
<input type="file" id="image" accept="image/png"/>
JavaScript:
const formData = new FormData()
// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')
// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)
查看 querystring。
您可以按如下方式使用:
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
上述方法对我有用,但由于它是我经常需要的东西,所以我对平面对象使用了基本方法。请注意,我也在使用 Vue 而不是 REACT
packageData: (data) => {
const form = new FormData()
for ( const key in data ) {
form.append(key, data[key]);
}
return form
}
这对我有用,直到我 运行 进入具有嵌套对象和文件的更复杂的数据结构,然后让下面的
packageData: (obj, form, namespace) => {
for(const property in obj) {
// if form is passed in through recursion assign otherwise create new
const formData = form || new FormData()
let formKey
if(obj.hasOwnProperty(property)) {
if(namespace) {
formKey = namespace + '[' + property + ']';
} else {
formKey = property;
}
// if the property is an object, but not a File, use recursion.
if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
packageData(obj[property], formData, property);
} else {
// if it's a string or a File
formData.append(formKey, obj[property]);
}
}
}
return formData;
}
在我的例子中,我必须将 boundary 添加到 header,如下所示:
const form = new FormData();
form.append(item.name, fs.createReadStream(pathToFile));
const response = await axios({
method: 'post',
url: 'http://www.yourserver.com/upload',
data: form,
headers: {
'Content-Type': `multipart/form-data; boundary=${form._boundary}`,
},
});
如果您使用的是 React Native,此解决方案也很有用。
更直接:
axios.post('/addUser',{
userName: 'Fred',
userEmail: 'Flintstone@gmail.com'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
在axios中使用application/x-www-form-urlencoded格式
By default, axios serializes JavaScript objects to JSON. To send data
in the application/x-www-form-urlencoded format instead, you can use
one of the following options.
浏览器
在浏览器中,您可以按如下方式使用 URLSearchParams API:
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
请注意,并非所有浏览器都支持 URLSearchParams(请参阅 caniuse.com),但可以使用 polyfill(确保对全局环境进行 polyfill)。
或者,您可以使用 qs 库对数据进行编码:
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
或者换一种方式(ES6),
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url, };
axios(options);
2020 ES6 做事方式
具有 html 中的表单,我像这样绑定数据:
数据:
form: {
name: 'Joan Cap de porc',
email: 'fake@email.com',
phone: 2323,
query: 'cap d\ou'
file: null,
legal: false
},
提交时:
async submitForm() {
const formData = new FormData()
Object.keys(this.form).forEach((key) => {
formData.append(key, this.form[key])
})
try {
await this.$axios.post('/ajax/contact/contact-us', formData)
this.$emit('formSent')
} catch (err) {
this.errors.push('form_error')
}
}
import axios from "axios";
import qs from "qs";
const url = "https://yourapplicationbaseurl/api/user/authenticate";
let data = {
Email: "testuser@gmail.com",
Password: "Admin@123"
};
let options = {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
data: qs.stringify(data),
url
};
axios(options)
.then(res => {
console.log("yeh we have", res.data);
})
.catch(er => {
console.log("no data sorry ", er);
});
};
在我的例子中,问题是 FormData 追加操作的格式需要填写额外的“选项”参数来定义文件名:
var formData = new FormData();
formData.append(fieldName, fileBuffer, {filename: originalName});
我看到很多抱怨 axios 坏了,但实际上根本原因是没有正确使用表单数据。我的版本是:
"axios": "^0.21.1",
"form-data": "^3.0.0",
在接收端,我正在用 multer 处理这个问题,最初的问题是文件数组没有被填充——我总是收到一个没有从流中解析文件的请求。
此外,还需要传递axios请求中设置的form-data header:
const response = await axios.post(getBackendURL() + '/api/Documents/' + userId + '/createDocument', formData, {
headers: formData.getHeaders()
});
我的整个函数如下所示:
async function uploadDocumentTransaction(userId, fileBuffer, fieldName, originalName) {
var formData = new FormData();
formData.append(fieldName, fileBuffer, {filename: originalName});
try {
const response = await axios.post(
getBackendURL() + '/api/Documents/' + userId + '/createDocument',
formData,
{
headers: formData.getHeaders()
}
);
return response;
} catch (err) {
// error handling
}
}
“fieldName”的值并不重要,除非您有一些接收端处理需要它。
https://www.npmjs.com/package/axios
正常工作
// "内容类型": "application/x-www-form-urlencoded",
// 提交这个
import axios from 'axios';
let requestData = {
username : "abc@gmail.cm",
password: "123456"
};
const url = "Your Url Paste Here";
let options = {
method: "POST",
headers: {
'Content-type': 'application/json; charset=UTF-8',
Authorization: 'Bearer ' + "your token Paste Here",
},
data: JSON.stringify(requestData),
url
};
axios(options)
.then(response => {
console.log("K_____ res :- ", response);
console.log("K_____ res status:- ", response.status);
})
.catch(error => {
console.log("K_____ error :- ", error);
});
获取请求
fetch(url, {
method: 'POST',
body: JSON.stringify(requestPayload),
headers: {
'Content-type': 'application/json; charset=UTF-8',
Authorization: 'Bearer ' + token,
},
})
// .then((response) => response.json()) . // commit out this part if response body is empty
.then((json) => {
console.log("response :- ", json);
}).catch((error)=>{
console.log("Api call error ", error.message);
alert(error.message);
});
我还需要计算内容长度
const formHeaders = form.getHeaders();
formHeaders["Content-Length"] = form.getLengthSync()
const config = {headers: formHeaders}
return axios.post(url, form, config)
.then(res => {
console.log(`form uploaded`)
})
我需要使用 axios 一次上传许多文件,由于 FormData API 我挣扎了一段时间:
// const instance = axios.create(config);
let fd = new FormData();
for (const img of images) { // images is an array of File Object
fd.append('images', img, img.name); // multiple upload
}
const response = await instance({
method: 'post',
url: '/upload/',
data: fd
})
我没有指定content-type: multipart/form-data
header!
transformRequest: [
function(data, headers) {
headers["Content-Type"] = "application/json";
return JSON.stringify(data);
}
]
试试这个,它有效
我在使用带有 axios 的 FormData 来调用 https://apps.dev.microsoft.com 服务时遇到了类似的问题,并且错误显示为“The request正文必须包含以下参数:'grant_type'"
重新格式化来自
的数据后
{
grant_type: 'client_credentials',
id: '123',
secret: '456789'
}
到
"grant_type=client_credentials&id=123&secret=456789"
并且以下代码有效:
const config: AxiosRequestConfig = {
method: 'post',
url: https://apps.dev.microsoft.com/auth,
data: 'grant_type=client_credentials&id=123&secret=456789',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
对我来说,它使用 axios、typescript 和 form-data(v4.0.0):
import FormData from "form-data";
import axios from "axios";
async function login() {
var data = new FormData();
data.append("User", "asdf");
const return = await axios.post(
"https://ptsv2.com/t/1q9gx-1652805776/post", data,
{ headers: data.getHeaders() }
);
console.log(return);
}
当需要在 NodeJS 环境中使用 axios POST x-www-form-urlencoded 数据时,这应该能很好地工作。如果端点需要身份验证,您可能需要向 config.headers object 添加授权 header。
const config = {
headers: {
accept: 'application/json',
'cache-control': 'no-cache',
'content-type': 'application/x-www-form-urlencoded'
}
const params = new URLSearchParams({key1: value1, key2: value2});
return axios
.post(url, params.toString(), config)
.then((response) => {
return response.data;
})
.catch((error) => console.error(error));
在 nodejs
中,您可以使用 URLSearchParams
。
像这样:
const formData = new URLSearchParams({
param1: 'this',
param2: 'is',
param3: 'neat',
});
一个boundary (which is used, by the server, to parse the payload) is set when the request is sent. You can't obtain the boundary before making the request. So, a better way to get this is using getBoundary()
from your FormData.
var formData = new FormData();
formData.append('userName', 'Fred');
formData.append('file0', fileZero);
formData.append('file1', fileOne);
axios({
method: "post",
url: "myurl",
data: formData,
headers: {
'Content-Type': `multipart/form-data; ${formData.getBoundary()}`,
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
axios POST
请求命中控制器上的 url 但将空值设置为我的 POJO class,当我在 chrome 中使用开发人员工具时,有效负载包含数据。我做错了什么?
Axios POST请求:
var body = {
userName: 'Fred',
userEmail: 'Flintstone@gmail.com'
}
axios({
method: 'post',
url: '/addUser',
data: body
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
浏览器响应:
如果我将 headers 设置为:
headers:{
Content-Type:'multipart/form-data'
}
请求抛出错误
Error in posting multipart/form-data. Content-Type header is missing boundary
如果我在邮递员中发出相同的请求,它工作正常并为我的 POJO 设置值 class。
任何人都可以解释如何设置边界或如何使用 axios 发送表单数据。
您可以 post 使用 FormData() 的 axios 数据,例如:
var bodyFormData = new FormData();
然后将字段添加到您要发送的表单中:
bodyFormData.append('userName', 'Fred');
如果您要上传图片,您可能需要使用 .append
bodyFormData.append('image', imageFile);
然后就可以使用axios post方法(可以相应修改)
axios({
method: "post",
url: "myurl",
data: bodyFormData,
headers: { "Content-Type": "multipart/form-data" },
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
相关 GitHub 问题:
Can't get a .post with 'Content-Type': 'multipart/form-data' to work @ axios/axios
上传(多个)二进制文件
Node.js
当您想通过 multipart/form-data
访问 post 文件时,事情就变得复杂了,尤其是多个二进制文件。下面是一个工作示例:
const FormData = require('form-data')
const fs = require('fs')
const path = require('path')
const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
headers: formData.getHeaders()
})
- 而不是
headers: {'Content-Type': 'multipart/form-data' }
我更喜欢headers: formData.getHeaders()
- 上面我用的是
async
和await
,不喜欢可以改成普通的Promise语句 - 为了添加您自己的 headers,您只需
headers: { ...yourHeaders, ...formData.getHeaders() }
新增内容如下:
浏览器
浏览器的 FormData
与 NPM 包 'form-data' 不同。以下代码在浏览器中对我有用:
HTML:
<input type="file" id="image" accept="image/png"/>
JavaScript:
const formData = new FormData()
// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')
// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)
查看 querystring。
您可以按如下方式使用:
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
上述方法对我有用,但由于它是我经常需要的东西,所以我对平面对象使用了基本方法。请注意,我也在使用 Vue 而不是 REACT
packageData: (data) => {
const form = new FormData()
for ( const key in data ) {
form.append(key, data[key]);
}
return form
}
这对我有用,直到我 运行 进入具有嵌套对象和文件的更复杂的数据结构,然后让下面的
packageData: (obj, form, namespace) => {
for(const property in obj) {
// if form is passed in through recursion assign otherwise create new
const formData = form || new FormData()
let formKey
if(obj.hasOwnProperty(property)) {
if(namespace) {
formKey = namespace + '[' + property + ']';
} else {
formKey = property;
}
// if the property is an object, but not a File, use recursion.
if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
packageData(obj[property], formData, property);
} else {
// if it's a string or a File
formData.append(formKey, obj[property]);
}
}
}
return formData;
}
在我的例子中,我必须将 boundary 添加到 header,如下所示:
const form = new FormData();
form.append(item.name, fs.createReadStream(pathToFile));
const response = await axios({
method: 'post',
url: 'http://www.yourserver.com/upload',
data: form,
headers: {
'Content-Type': `multipart/form-data; boundary=${form._boundary}`,
},
});
如果您使用的是 React Native,此解决方案也很有用。
更直接:
axios.post('/addUser',{
userName: 'Fred',
userEmail: 'Flintstone@gmail.com'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
在axios中使用application/x-www-form-urlencoded格式
By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.
浏览器
在浏览器中,您可以按如下方式使用 URLSearchParams API:
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
请注意,并非所有浏览器都支持 URLSearchParams(请参阅 caniuse.com),但可以使用 polyfill(确保对全局环境进行 polyfill)。
或者,您可以使用 qs 库对数据进行编码:
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
或者换一种方式(ES6),
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url, };
axios(options);
2020 ES6 做事方式
具有 html 中的表单,我像这样绑定数据:
数据:
form: {
name: 'Joan Cap de porc',
email: 'fake@email.com',
phone: 2323,
query: 'cap d\ou'
file: null,
legal: false
},
提交时:
async submitForm() {
const formData = new FormData()
Object.keys(this.form).forEach((key) => {
formData.append(key, this.form[key])
})
try {
await this.$axios.post('/ajax/contact/contact-us', formData)
this.$emit('formSent')
} catch (err) {
this.errors.push('form_error')
}
}
import axios from "axios";
import qs from "qs";
const url = "https://yourapplicationbaseurl/api/user/authenticate";
let data = {
Email: "testuser@gmail.com",
Password: "Admin@123"
};
let options = {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
data: qs.stringify(data),
url
};
axios(options)
.then(res => {
console.log("yeh we have", res.data);
})
.catch(er => {
console.log("no data sorry ", er);
});
};
在我的例子中,问题是 FormData 追加操作的格式需要填写额外的“选项”参数来定义文件名:
var formData = new FormData();
formData.append(fieldName, fileBuffer, {filename: originalName});
我看到很多抱怨 axios 坏了,但实际上根本原因是没有正确使用表单数据。我的版本是:
"axios": "^0.21.1",
"form-data": "^3.0.0",
在接收端,我正在用 multer 处理这个问题,最初的问题是文件数组没有被填充——我总是收到一个没有从流中解析文件的请求。
此外,还需要传递axios请求中设置的form-data header:
const response = await axios.post(getBackendURL() + '/api/Documents/' + userId + '/createDocument', formData, {
headers: formData.getHeaders()
});
我的整个函数如下所示:
async function uploadDocumentTransaction(userId, fileBuffer, fieldName, originalName) {
var formData = new FormData();
formData.append(fieldName, fileBuffer, {filename: originalName});
try {
const response = await axios.post(
getBackendURL() + '/api/Documents/' + userId + '/createDocument',
formData,
{
headers: formData.getHeaders()
}
);
return response;
} catch (err) {
// error handling
}
}
“fieldName”的值并不重要,除非您有一些接收端处理需要它。
https://www.npmjs.com/package/axios
正常工作
// "内容类型": "application/x-www-form-urlencoded", // 提交这个
import axios from 'axios';
let requestData = {
username : "abc@gmail.cm",
password: "123456"
};
const url = "Your Url Paste Here";
let options = {
method: "POST",
headers: {
'Content-type': 'application/json; charset=UTF-8',
Authorization: 'Bearer ' + "your token Paste Here",
},
data: JSON.stringify(requestData),
url
};
axios(options)
.then(response => {
console.log("K_____ res :- ", response);
console.log("K_____ res status:- ", response.status);
})
.catch(error => {
console.log("K_____ error :- ", error);
});
获取请求
fetch(url, {
method: 'POST',
body: JSON.stringify(requestPayload),
headers: {
'Content-type': 'application/json; charset=UTF-8',
Authorization: 'Bearer ' + token,
},
})
// .then((response) => response.json()) . // commit out this part if response body is empty
.then((json) => {
console.log("response :- ", json);
}).catch((error)=>{
console.log("Api call error ", error.message);
alert(error.message);
});
我还需要计算内容长度
const formHeaders = form.getHeaders();
formHeaders["Content-Length"] = form.getLengthSync()
const config = {headers: formHeaders}
return axios.post(url, form, config)
.then(res => {
console.log(`form uploaded`)
})
我需要使用 axios 一次上传许多文件,由于 FormData API 我挣扎了一段时间:
// const instance = axios.create(config);
let fd = new FormData();
for (const img of images) { // images is an array of File Object
fd.append('images', img, img.name); // multiple upload
}
const response = await instance({
method: 'post',
url: '/upload/',
data: fd
})
我没有指定content-type: multipart/form-data
header!
transformRequest: [
function(data, headers) {
headers["Content-Type"] = "application/json";
return JSON.stringify(data);
}
]
试试这个,它有效
我在使用带有 axios 的 FormData 来调用 https://apps.dev.microsoft.com 服务时遇到了类似的问题,并且错误显示为“The request正文必须包含以下参数:'grant_type'"
重新格式化来自
的数据后{
grant_type: 'client_credentials',
id: '123',
secret: '456789'
}
到
"grant_type=client_credentials&id=123&secret=456789"
并且以下代码有效:
const config: AxiosRequestConfig = {
method: 'post',
url: https://apps.dev.microsoft.com/auth,
data: 'grant_type=client_credentials&id=123&secret=456789',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
对我来说,它使用 axios、typescript 和 form-data(v4.0.0):
import FormData from "form-data";
import axios from "axios";
async function login() {
var data = new FormData();
data.append("User", "asdf");
const return = await axios.post(
"https://ptsv2.com/t/1q9gx-1652805776/post", data,
{ headers: data.getHeaders() }
);
console.log(return);
}
当需要在 NodeJS 环境中使用 axios POST x-www-form-urlencoded 数据时,这应该能很好地工作。如果端点需要身份验证,您可能需要向 config.headers object 添加授权 header。
const config = {
headers: {
accept: 'application/json',
'cache-control': 'no-cache',
'content-type': 'application/x-www-form-urlencoded'
}
const params = new URLSearchParams({key1: value1, key2: value2});
return axios
.post(url, params.toString(), config)
.then((response) => {
return response.data;
})
.catch((error) => console.error(error));
在 nodejs
中,您可以使用 URLSearchParams
。
像这样:
const formData = new URLSearchParams({
param1: 'this',
param2: 'is',
param3: 'neat',
});
一个boundary (which is used, by the server, to parse the payload) is set when the request is sent. You can't obtain the boundary before making the request. So, a better way to get this is using getBoundary()
from your FormData.
var formData = new FormData();
formData.append('userName', 'Fred');
formData.append('file0', fileZero);
formData.append('file1', fileOne);
axios({
method: "post",
url: "myurl",
data: formData,
headers: {
'Content-Type': `multipart/form-data; ${formData.getBoundary()}`,
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});