使用 MVC 和 Web API 上传 Ng-File-Upload - 不断收到“404 Not Found”答案

【问题标题】：Ng-File-Upload with MVC & Web API - keep getting "404 Not Found"使用 MVC 和 Web API 上传 Ng-File-Upload - 不断收到“404 Not Found”
【发布时间】：2016-06-07 06:19:13
【问题描述】：

我需要允许在我的 AngularJS + WebAPI 项目中上传图片。为此，我根据此示例代码使用 ng-file-upload：http://monox.mono-software.com/blog/post/Mono/233/Async-upload-using-angular-file-upload-directive-and-net-WebAPI-service/

对邮政编码进行了一些调整，如下所示：

$scope.onFileSelect = function ($files) {
    console.log("on file select is running!");
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
        var $file = $files[i];
        (function (index) {
            Upload.upload({
                url: "/api/Uploads/Upload", // webapi url
                method: "POST",                   
                file: $file
            }).progress(function (evt) {
                // get upload percentage
                console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
            }).success(function (data, status, headers, config) {
                // file is uploaded successfully
                console.log(data);
            }).error(function (data, status, headers, config) {
                // file failed to upload
                console.log(data);
            });
        })(i);
    }
}

我已经有很多 web API 控制器，我根据上面链接中的代码示例添加了一个新的控制器（继承自 System.web.http.ApiController 而不是“常规" Microsoft.AspNet.Mvc.Controller 类）：

 [Route("api/[controller]")]
public class UploadsController : ApiController
{
    [HttpPost] // This is from System.Web.Http, and not from System.Web.Mvc        
    public async Task<HttpResponseMessage> Upload()
    {
        if (!Request.Content.IsMimeMultipartContent())
        {
            this.Request.CreateResponse(HttpStatusCode.UnsupportedMediaType);
        }

        var provider = GetMultipartProvider();
        var result = await Request.Content.ReadAsMultipartAsync(provider);

        // On upload, files are given a generic name like "BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"
        // so this is how you can get the original file name
        var originalFileName = GetDeserializedFileName(result.FileData.First());

        // uploadedFileInfo object will give you some additional stuff like file length,
        // creation time, directory name, a few filesystem methods etc..
        var uploadedFileInfo = new FileInfo(result.FileData.First().LocalFileName);



        // Through the request response you can return an object to the Angular controller
        // You will be able to access this in the .success callback through its data attribute
        // If you want to send something to the .error callback, use the HttpStatusCode.BadRequest instead
        var returnData = "ReturnTest";
        return this.Request.CreateResponse(HttpStatusCode.OK, new { returnData });
    }

问题是，我在发帖时总是收到“404 not found”。

我试过了：

所有堆栈溢出答案
在线解答
去掉“上传”函数的内容，改成MVC的Controller基类->还是一样的结果。
将“上传”方法的名称更改为“发布”并发布到“/api/uploads” -> 相同的 404。

请帮忙！谢谢！

编辑

这是浏览器的“网络”标签：

我正在使用 HTTPS
这是“实时”测试的（没有本地主机）= 相同的结果。

EDIT2

我的路线：

  app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });

这些是唯一声明的路由。

EDIT3

我 100% 确定问题在于我使用“ApiController”作为基类而不是“Controller”。我添加了一个新控制器，我可以毫无问题地访问它。现在只是让它工作，因为我在“Controller”中没有“Request.Content” - 有什么想法吗？

我看到了 2 种可行的方法：

将 HttpRequestMessage 作为参数传递给方法：

公共异步任务发布（[FromBody]HttpRequestMessage 请求）

但我收到 HTTP 500，因为我不知道如何从 Angular 的 POST 中传递。

或：

让 Request.Content 在 Controller 下解析（不知道如何）。

有人能做到这一点吗？谢谢！

【问题讨论】：

有人吗？我真的被困在这里了......
您已经尝试过 all Stack Overflow 的答案了吗？哇。 – 如果有 404，则服务器拒绝该请求。尝试使用正常的 XMLHttpRequest 发布到该 URL，以查看服务器是否正确响应。一旦你得到它的工作，用实际的文件上传替换它。
@poke 我的意思是相关答案。帖子目标与我所有其他帖子“/api/[contoller]”相同 - 为什么要拒绝这个？以及如何发送正常的 XMLHttpRequest 请求？谢谢！
如果所有其他端点都工作正常，那就更奇怪了，所以你一定要检查请求是否正常工作。有关如何使用 XHR 的信息，请参阅 this。此外，您应该尝试在 C# 中进行调试以查看请求是否到达以及导致失败的原因。并且一定要检查你的浏览器的网络开发工具，看看 URL 是否真的正确。
@poke 在尝试调试时，即使在 Web API 控制器的构造函数中，也无法访问它，因此可能是路由问题？还是我期望构造函数在此时运行是错误的？

标签： c# angularjs asp.net-mvc

【解决方案1】：

我能够通过以下方式解决我在 EDIT3 中发布的问题：

 if (Request.Form.Files != null && Request.Form.Files.Count > 0)
        {
            var file = Request.Form.Files[0];
            var contentType = file.ContentType;

            using (var fileStream = file.OpenReadStream())
            {
                using (var memoryStream = new MemoryStream())
                {
                    await fileStream.CopyToAsync(memoryStream);
                    FileStream newFS = new FileStream(Settings.UserImagesDir + "\\name.png", FileMode.Create);
                    memoryStream.WriteTo(newFS);
                    newFS.Close();                     
                }
            }
        }

所有这些都在从 Controller 继承的常规 Web api 控制器中。

感谢大家的帮助，虽然没有人解决它，但你们都把我推向了正确的方向。

【讨论】：

我不明白您的操作更改如何解决了您的 404 问题。
@MohammedDawoodAnsari 基类的变化解决了 404，动作本身的变化来弥补从前基类派生的“Request.Content”的损失。我在 EDIT3 中描述了它。

【解决方案2】：

问题是您为 URL /api/Uploads/Upload 配置了错误的路由。为了使其匹配，您必须为方法 Upload 指定一个模板，因为它实际上并不是以 HTTP 方法命名的。

[HttpPost("upload")]
public async Task<HttpResponseMessage> Upload()
{
    // code omitted...
}

【讨论】：