代码之家 › 专栏 › 技术社区 › Paul Fleming

角度多部分表单数据上传webapi 404

multipartform-data asp.net-web-api2 file-upload asp.net-mvc angularjs

Paul Fleming · 技术社区 · 8 年前

角度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#网络应用程序:

[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 Developer Tools控制台中,在404 POST错误之后,同一请求上有一个CORS错误。我以前见过WebApi失败时出现这种情况,但我认为实际上并不存在CORS错误,因为当我从请求中排除文件时,它可以工作。

使现代化
情节越来越复杂。它可以很好地处理小文件(几MB)。如果我上传一个27MB的文件,我会收到一个500的错误,说明“超过了最大请求长度”。太棒了去某个地方。但是如果我上传一个56MB的文件,我会得到404状态码。这是怎么回事?

通过以下配置,27MB文件可以工作,但56MB文件仍然返回404。

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

1 回复 | 直到 8 年前

Paul Fleming 8 年前

好吧,用新鲜的眼光,我已经找到了原因。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')
    });
}

[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”>
<(lt;);system.web>
<(lt;);httpRuntime executionTimeout=“86400”maxRequestLength=“4194303”/>
<(lt;);system.webServer>
<(lt;);安全性>
<(lt;);请求筛选>
<(lt;);requestLimits maxAllowedContentLength=“4294967295”/>
<(lt;)/请求筛选>
<(lt;)/安全性>
<(lt;)/system.webServer>
<(lt;)/位置>