尝试使用 Axios 发送带有 FormData 的 POST 时,MVC 控制器接收到空数据
Posted
技术标签:
【中文标题】尝试使用 Axios 发送带有 FormData 的 POST 时,MVC 控制器接收到空数据【英文标题】:MVC Controller receives null data when trying to send POST with FormData using Axios 【发布时间】:2020-02-08 19:33:36 【问题描述】:我似乎无法找出我的控制器接收空数据的原因。我能够到达控制器,但没有数据传输。当我使用 Postman 使用 Body 和正确的键/数据内容测试 API 时,控制器端一切正常。
我的控制器方法:
[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");
...
文件模型:
public class FileModel
public string Name get; set;
public string Extension get; set;
public string FolderPath get; set;
public IFormFile File get; set;
以及客户端 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);
);
我认为问题出在我发送的数据类型上?特别是对于FileModel
s File
属性类型IFormFile
。欢迎所有想法!
使用的Axios 0.19.2版本
【问题讨论】:
您是否尝试将[FromForm]
替换为[FromBody]
?
with [FromBody]
我收到来自控制器的回复:415 Unsupported Media Type
。与 Postman 和 Axios 的回复相同。
尝试将您的content-type
更改为application/json
,基于***.com/a/46278263/6797509
嗯,我试过这个: headers: 'Content-Type': 'application/json'
,但没有影响。我仍在到达控制器,但file
所有属性都是null
嗯,使用[FromBody]
并将content-type
设置为application/json
,然后通过postman
尝试以row
发送数据。请注意将数据类型设置为JSON (application/type)
--> i.stack.imgur.com/RdwPZ.png
【参考方案1】:
我认为主要问题与我最初尝试的数据类型有关。给定的data
具有正确的格式/类型,这一点很重要。
如下正确定义数据有帮助:
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"
;
当formData
如上所述定义时,以下 Axios POST 可以正常运行,而控制器不会出现问题或更改,[FromForm]
可以正常工作。
return axios.post(
"api/files",
formData,
requestConfig)
.then((response) =>
console.log(response.data);
)
.catch((error) =>
console.log(error);
);
【讨论】:
【参考方案2】:曾经遇到过类似的问题。我有以下 ajax 设置:
$.ajax
(
async: true,
crossDomain: true,
headers:
'Accept': 'application/json',
'Content-Type': 'application/json'
,
encType: 'multipart/form-data',
url: apiURL,
method: "POST",
data: dataObject,
processData: false,
contentType: false
);
问题在于发送:
headers:
'Accept': 'application/json',
'Content-Type': 'application/json'
然后:
encType: 'multipart/form-data'
对于预期的数据格式存在混淆,因此终点是接收一个字段全部为空的请求模型。
更改为以下内容以解决问题:
$.ajax
(
async: true,
crossDomain: true,
encType: 'multipart/form-data',
url: apiURL,
method: "POST",
processData: false,
contentType: false,
data: dataObject
);
【讨论】:
以上是关于尝试使用 Axios 发送带有 FormData 的 POST 时,MVC 控制器接收到空数据的主要内容,如果未能解决你的问题,请参考以下文章
Vuex+Laravel:无法将带有 FormData 和 axios 的多个文件发送到服务器端。在服务器端始终为空。这是怎么回事?
Laravel 无法获取 Nuxt 中 axios FormData 发送的数据
带有 formData 的 axios.post 总是返回空
向 API 请求 formData,上传图片时在 axios 中出现“网络错误”