我正在使用 JavaScript 创建 API 调用并将其发送到相应的 Asp.Net Core 函数。
JavaScript:
function fileSubmit() {
var data = document.getElementById("myFile").files; //it should be noted that this successfully catches the file.
var formData = new FormData();
formData.append("files", data);
var url = "http://localhost/api/Surveys/123456/Units/987654/Images";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "image/jpeg");
xhr.send(formData);
}
.Net 核心:
[HttpPost]
[Route("{Id:int:min(1)}/Units/{unitId:int:min(1)}/Images")]
[ProducesResponseType(typeof(IAPIResponse2<UploadImagesResponse>), StatusCodes.Status200OK)]
[ProducesResponseType(typeof(IAPIResponse2<UploadImagesResponse>), StatusCodes.Status400BadRequest)]
public async Task<IActionResult> UploadImages([FromForm, Required] IList<IFormFile> files)
{
//do stuff
}
我能够创建和发送 API 调用,它被 Asp.Net 函数捕获,但 files
参数为空。据我所知,文件列表已成功附加到 JavaScript 函数中的 formData
对象。
我错过了什么?
最佳答案
上面的 JavaScript 代码有两个问题:
files
发送不正确。如果您查看该请求,您会发现它有点困惑,并将[object FileList]
作为正文的一部分包含在内。
要解决此问题,您需要遍历文件并单独添加它们:
var files = document.getElementById("myFile").files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("files", files[i]);
}
如果您只是发送一个文件,您可以简化这个:
var files = document.getElementById("myFile").files;
var formData = new FormData();
formData.append("files", files[0]);
- 发出请求时不应设置
Content-Type
header 。
要解决此问题,只需删除对 setRequestHeader
的调用。 Content-Type
header 将由 XHR 进程设置为具有边界的 multipart/form-data
(有关 Multipart Content-Type,请参阅 RFC)。
Each part starts with an encapsulation boundary, and then contains a body part consisting of header area, a blank line, and a body area.
由于这种结构方式,Content-Type
是在每个文件的基础上指定的。如果您有兴趣,请在完成我详细说明的更改后查看开发者工具中的请求。
关于javascript - API 调用未捕获 Formdata 图像文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45617973/