Angular 多部分表单数据上传webapi 404

Question

我正在尝试将文件从 AngularJS 上传到 ASP.NET WebAPI。由于某种原因，它被带有 404 状态代码的 WebAPI 拒绝。这是代码：

Angular JS:

function upload(file, assessmentId, progressCallback) {
    var formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('assessmentId', assessmentId);

    // post the file
    return $http({
        data: formData,
        headers: { 'Content-Type': undefined },
        method: 'POST',
        url: _api('api/video/upload')
    });
}

也尝试过：

function upload(file, assessmentId, progressCallback) {
    var formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('assessmentId', assessmentId);

    return $http.post(_api('api/video/upload'), formData, {
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
    });
}

C# WebApi:

[HttpPost]
[Route("api/video/upload")]
public async Task<IHttpActionResult> Upload()
{
    if (!Request.Content.IsMimeMultipartContent("form-data"))
        return StatusCode(HttpStatusCode.UnsupportedMediaType);

    /* do stuff */

    return Ok(new { test = "ing" });
}

如果我注释掉 formData.append('file', file, file.name); 所以只附加 assessmentId，WebApi 会接受请求。

file 来自 HTML 文件上传控件：element[0].files[0]。请问是不是哪里出错了？

另一件需要注意的事情是在 Chrome 开发人员工具控制台中，在 404 POST 错误之后，同一请求上出现了 CORS 错误。我以前在 WebApi 失败时看到过这种情况，但我认为实际上没有 CORS 错误，因为当我从请求中排除文件时它会起作用。

更新
情节变厚了。它适用于小文件（几 MB）。如果我上传一个 27MB 的文件，我会收到一个 500 错误，指出 "Maximum request length exceeded"。伟大的！到达某个地方。但是如果我上传一个 56MB 的文件，我会得到 404 状态代码。这里发生了什么？

使用以下配置，27MB 的文件有效，但 56MB 的文件仍然 returns 404。

<location path="api/video/upload">
    <system.web>
        <httpRuntime executionTimeout="86400" maxRequestLength="4194304" />
    </system.web>
</location>

Answer 1

好的，用新的眼光，我找到了原因。 ASP.NET 中还有更多配置设置来限制请求大小。 OP中的代码很好。需要此配置（4GB 限制）：

<location path="api/video/upload">
    <system.web>
        <httpRuntime executionTimeout="86400" maxRequestLength="4194303" />
    </system.web>
    <system.webServer>
        <security>
            <requestFiltering>
                <requestLimits maxAllowedContentLength="4294967295" />
            </requestFiltering>
        </security>
    </system.webServer>
</location>

为了让这个答案成为一个完整的解决方案，这里再次提供代码：

Angular JS服务操作：

upload: function (file, assessmentId, progressCallback) {
    var formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('assessmentId', assessmentId);

    // post the file
    return $http({
        data: formData,
        headers: { 'Content-Type': undefined },
        method: 'POST',
        url: _api('api/video/upload')
    });
}

WebApi 操作：

[HttpPost]
[Route("api/video/upload")]
public async Task<IHttpActionResult> Upload()
{
    if (!Request.Content.IsMimeMultipartContent("form-data"))
        return StatusCode(HttpStatusCode.UnsupportedMediaType);

    /* do stuff */

    return Ok(new { test = "ing" });
}

WebAPI web.config:

<location path="api/video/upload">
    <system.web>
        <httpRuntime executionTimeout="86400" maxRequestLength="4194303" />
    </system.web>
    <system.webServer>
        <security>
            <requestFiltering>
                <requestLimits maxAllowedContentLength="4294967295" />
            </requestFiltering>
        </security>
    </system.webServer>
</location>

Angular 多部分表单数据上传webapi 404

Angular multipart form data upload webapi 404

asp.net-mvc

file-upload

multipartform-data

angularjs

asp.net-web-api2