Question

我试图将文件从AngularJS上传到ASP.NET WebAPI。出于某种原因，WebAPI拒绝了404状态代码。这是代码：

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错误，说明＆＃34;超出最大请求长度＆＃34;。大！去某个地方。但如果我上传一个56MB的文件，我会得到404状态代码。这里发生了什么？

使用以下配置，27MB文件可以正常工作，但56MB文件仍然会返回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 multipart form data upload webapi 404

1 个答案: