c# - 使用 MVC 和 Web API 的 Ng-File-Upload - 不断获取 "404 Not Found"

Question

我需要在我的 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 Controller ，我根据上面链接中的代码示例添加了一个新 Controller (继承自 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”。

我试过:

1. 所有堆栈溢出答案

2. 在线答题

3. 去掉“Upload”函数的内容，改用MVC的Controller基类->还是一样的结果。

4. 将“上传”方法的名称更改为“发布”并发布到“/api/uploads”-> 相同的 404。

求助!谢谢!

编辑

这是浏览器的“网络”选项卡:

• 我正在使用 HTTPS

• 这是“实时”测试(没有本地主机)= 相同的结果。

EDIT2

我的路线:

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

这些是唯一声明的路线。

EDIT3

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

我认为有 2 种可能性可以让它发挥作用:

1. 将 HttpRequestMessage 作为参数传递给方法:

   公共(public)异步任务发布([FromBody]HttpRequestMessage 请求)

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

或:

1. 获取 Request.Content 在 Controller 下解析(不知道如何)。

有人成功过吗？谢谢!

Answer 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 Controller 中。

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