[英]MVC Controller receives null data when trying to send POST with FormData using Axios
I don't seem to be able to find out why my controller receives null data.我似乎无法找出我的控制器接收空数据的原因。 I am able to reach the controller, but no data is transmitted.我能够到达控制器,但没有数据传输。 Everything works fine at the controller end when I am using Postman to test the API with Body and with correct key/data content.当我使用Postman用 Body 和正确的密钥/数据内容测试 API 时,在控制器端一切正常。
My controller method:我的控制器方法:
[Route("home/api/files")]
public class FileController : ControllerBase
{
[HttpPost]
public async Task<IActionResult> Post([FromForm] FileModel file)
{
if (file == null)
return BadRequest("Given data is null");
if (string.IsNullOrEmpty(file.Name))
return BadRequest("File name is undefined");
if (string.IsNullOrEmpty(file.FolderPath))
return BadRequest("FolderPath is undefined");
if (file.File.Length < 0)
return BadRequest("File content is empty");
...
}
}
The FileModel:文件模型:
public class FileModel
{
public string Name { get; set; }
public string Extension { get; set; }
public string FolderPath { get; set; }
public IFormFile File { get; set; }
}
And the client-side Axios call:客户端 Axios 调用:
export function uploadFile(folderPath, data) {
console.log("upLoadFile", folderPath, data);
const formData = new FormData();
formData.set('name', data.file);
formData.set('extension', data.extension);
formData.set('folderPath', folderPath);
formData.append('file', data);
return axios.post(
"api/files",
formData,
{ headers: { 'Content-Type': 'multipart/form-data}' }})
//{ headers: { 'Content-Type': 'multipart/form-data; boundary=${form._boundary}' }})
.then((response) => {
console.log(response.data);
console.log(response.status);
})
.catch((error) => {
console.log(error);
});
}
I assume the issue lies somewhere with the data types I am sending?我认为问题出在我发送的数据类型的某个地方? Particularly, with the FileModel
s File
property type IFormFile
.特别是,对于FileModel
的File
属性类型IFormFile
。 All ideas are welcomed!欢迎所有想法!
The used version of Axios 0.19.2使用的Axios 0.19.2版本
I believe the main problem was related to the data types with my initial try.我相信主要问题与我最初尝试的数据类型有关。 It is important that the given data
is in the right format/type.重要的是给定的data
采用正确的格式/类型。
Defining the data properly as following helped:正确定义数据如下有帮助:
const file = new Blob([data.contents], { type: 'text/csv' });
const formData = new FormData();
formData.set('Name', data.file);
formData.set('Extension', data.extension);
formData.set('FolderPath', folderPath);
formData.append('File', file);
const requestConfig = {
headers: {
"Content-Type": "multipart/form-data"
}
};
when formData
is defined as above, the following Axios POST works out without issues or changes to the controller, [FromForm]
works as expected.当formData
定义时,以下 Axios POST 不会出现问题或控制器更改, [FromForm]
按预期工作。
return axios.post(
"api/files",
formData,
requestConfig)
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.