MVC 控制器在尝试使用 Axios 发送 POST 与 FormData 时收到空数据

Question

我似乎无法找出为什么我的控制器接收到空数据。我可以联系到控制器，但没有数据传输。当我使用 Postman 测试 API with Body 和正确的 key/data 内容时，控制器端一切正常。

我的控制器方法：

[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。欢迎所有想法！

The used version of Axios 0.19.2

Answer 1

我认为主要问题与我最初尝试时的数据类型有关。重要的是给定的 data 在右边 format/type。

正确定义数据如下帮助：

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);
});

Answer 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'
            }

然后：

编码类型：'multipart/form-data'

对于预期的数据格式存在混淆，因此终点是接收到一个字段全部为空的请求模型。

更改为以下内容以解决问题：

$.ajax
        ({
            async: true,
            crossDomain: true,
            encType: 'multipart/form-data',
            url: apiURL,
            method: "POST",
            processData: false,
            contentType: false,
            data: dataObject
        });

MVC 控制器在尝试使用 Axios 发送 POST 与 FormData 时收到空数据

MVC Controller receives null data when trying to send POST with FormData using Axios

javascript

c#

axios

asp.net-core-2.0