通过 Axios 从客户端向 .NET Core API 发送图像文件（避免 415 响应）答案

【问题标题】：Send Image File To .NET Core API from Client via Axios (Avoid 415 Response)通过 Axios 从客户端向 .NET Core API 发送图像文件（避免 415 响应）
【发布时间】：2021-01-04 19:05:31
【问题描述】：

我正在尝试将 .png 图像从客户端发送到 .NET Core API。我完全在 API 中关注official .NET Core documentation，所以我的控制器端点如下所示：

[HttpPut]
public async Task<IActionResult> SaveFile(List<IFormFile> files) {...}

由于我使用的是Axios，所以前端代码使用如下example ：

axios.put(url, imageFile, {
  headers: {
    'Content-Type': imageFile.type
  }
});

我也尝试将图像文件包装到 FormData 类中，如下所示：

const formData = new FormData(driversLicenseFile);
axios.put(url, formData , {...

我做错了什么？如何避免 415 响应码？

请求，它在浏览器中的显示方式包括在下面，以帮助您发现任何明显的问题。

【问题讨论】：

标签： file http .net-core axios

【解决方案1】：

当我做这样的事情时，我想，ASP.NET Core 怎么知道如何将imageFile 绑定到List<IFormFile> files。

您需要使用FormData，并且您应该使用与您的操作的参数名称相匹配的名称append，即files。

快速演示

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function upload(ev) {
    let file = document.getElementById("file-upload").files[0];
    let fd = new FormData();
    fd.append("files", file);

    axios.put(url, fd);
}
</script>

<input id="file-upload" type="file" oninput="upload()" />

【讨论】：

将const formData = new FormData(driversLicenseFile); 更改为const formData = new FormData(); 然后formData.append("files", driversLicenseFile); 就完成了。不需要更改 UI。不需要立即上传oninput。非常感谢您的帮助！正如你所说，files 为文件名，必须与.NET Core 中的参数名称匹配。
很高兴它成功了。仅包含 oninput="upload()" 作为演示的一部分。
我只是澄清我不需要它，因为我发现的几乎每个示例都需要立即提交表单。这让我认为可能需要立即提交，只是提到它，以便其他阅读此问题的人避免与我相同的困惑（你没有引起）。你的回答很棒。