尝试使用 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);
    );

我认为问题出在我发送的数据类型上?特别是对于FileModels 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 中出现“网络错误”

无法使用 Angular 7 中的 FormData 发送带有 Ajax 的文件

laravel vuejs/axios put request Formdata 为空