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

我正在尝试将

.png

图像从客户端发送到.NET核心API。我完全遵循API中的操作，因此我的控制器端点如下所示：

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

我还尝试将图像文件包装到

FormData

类中，如下所示：

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

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

请求及其在浏览器中的显示方式包含在下面，以防帮助您发现任何明显的问题

---

当我做这样的事情时，我想，ASP.NET Core怎么知道如何将

图像文件

绑定到

列表文件

您需要使用

FormData

，并且应该

附加一个与操作的参数名称匹配的名称，即
文件

快速演示

<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()" />


功能上传（ev）{
让file=document.getElementById（“文件上载”）.files[0]；
设fd=newformdata（）；
追加（“文件”，文件）；
axios.put（url，fd）；
}
Changing
const formData=new formData（driversLicenseFile）
to
const formData=new formData（）
然后
formData.append（“文件”，driversLicenseFile）就是全部。不需要更改用户界面。不需要立即上传
oninput
。非常感谢你的帮助！正如您所说，
files
作为文件名，必须与
.netcore
中的参数名匹配。很高兴它起作用了。仅包括作为演示的一部分的
oninput=“upload（）”
。我只是澄清我不需要它，因为我发现的几乎每个示例都需要立即提交表单。这让我想到可能需要立即提交，只是提到它，以便其他阅读此问题的人避免与我相同的困惑（这不是你造成的）。你的回答很好。
<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()" />