axios POST请求击中控制器上的url，但将空值设置为我的POJO类，当我在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:{
Content-Type:'multipart/form-data'
}
请求抛出错误
在发布多部分/表单数据时出错。内容类型报头缺少边界
如果我在邮递员中提出相同的请求，它就会正常工作，并为我的POJO类设置值。
有人能解释如何设置边界或如何使用axios发送表单数据吗?
https://www.npmjs.com/package/axios
它的工作
// "content-type": "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);
});
2020 ES6的做法
我在html中绑定了这样的数据:
数据:
form: {
name: 'Joan Cap de porc',
email: 'fake@email.com',
phone: 2323,
query: 'cap d\ou'
file: null,
legal: false
},
onSubmit:
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')
}
}
在我的例子中，问题是FormData追加操作的格式需要额外的“options”参数填充来定义文件名:
var formData = new FormData();
formData.append(fieldName, fileBuffer, {filename: originalName});
我看到很多人抱怨axios有问题，但实际上根本原因是没有正确使用form-data。我的版本是:
"axios": "^0.21.1",
"form-data": "^3.0.0",
在接收端，我用multer处理这个，最初的问题是文件数组没有被填充-我总是得到一个没有从流解析文件的请求。
此外，有必要在axios请求中传递表单数据头集:
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”的值并不重要，除非您有一些接收端处理需要它。
你可以通过使用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问题:
不能得到一个。post与'Content-Type': 'multipart/form-data'工作@ axios/axios
上传(多个)二进制文件
node . js
当您想通过多部分/form-data发布文件时，事情就变得复杂了，尤其是多个二进制文件。下面是一个工作示例:
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()
})
而不是头:{'Content-Type': 'multipart/form-data'}我更喜欢头:formData.getHeaders()
我在上面使用了async和await，如果你不喜欢它们，你可以将它们更改为简单的Promise语句
为了添加你自己的头文件，你只需要头文件:{…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)
