Question

我使用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对象。

我错过了什么？

Answer 1

上面的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标题。

要解决此问题，只需移除您对setRequestHeader的通话即可。 XHR流程将Content-Type标头设置为带有边界的multipart/form-data（请参阅多部分内容类型的RFC）。

每个部分以封装边界开始，然后包含由标题区域，空白行和正文区域组成的正文部分。

由于结构的方式，Content-Type是基于每个文件指定的。如果您有兴趣，请在完成我所详述的更改后，查看开发人员工具中的请求。

Formdata图像文件未被API调用捕获

1 个答案: