javascript - API 调用未捕获 Formdata 图像文件

标签 javascript asp.net-core

我正在使用 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 代码有两个问题:

  1. 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]);
  1. 发出请求时不应设置 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/

相关文章:

javascript - meteor 收藏不显示

javascript - 在 Angular 7 中,如何从英语 (LTR) 加载阿拉伯语 (RTL) 的 CSS

javascript - 如何使两行的高度为100%?

javascript - 在 jqueryUI 自动完成中使用 JSON-Object

asp.net-core - 为什么我的 JWT 不记名身份验证在 token 显示 5 分钟后将 token 识别为过期?

asp.net-core - VS Code 不在 ASP.NET Core 项目中启动浏览器

c# - 将 'hd' 参数附加到 redirectUrl ASP.NET Core 1 with Identity 3

c# - ASP.NET Core 3.1 - 如何在经过身份验证后持久保存 JWT token

Javascript 不会设置在 XHR 响应中收到的 httpcookie

javascript - 将所有文本输入值添加到一个总量框中