Angularを使用してASP.net Core APIにファイルをアップロード

Question

私はこれを約2日間検索していますが、これについては多くの投稿がありますが、私は自分のやりたいことを頭で囲むことはできません。

私が欲しいもの： angleを使って1つのファイルをAPIにアップロードし、そのフォルダにあるファイルを返したいとします。

私が持っているもの：

これはAPIにしますが何が起こっているか

[HttpPost] 
     [Route("uploadFile/{regionName}/{propertyName}")] 
     public async Task<IEnumerable<FileModel>> Post(ICollection<IFormFile> files, string regionName,string propertyName) 
     { 
      IEnumerable<FileModel> fileModels = null; 
      var route = Path.Combine(_baseRoot, regionName, propertyName); 
      PathCreator.CreateFolder(route, null); 
      try 
      { 
       var file = files.FirstOrDefault(); 
       if(file == null) 
        throw new ArgumentException("File Cannot be null"); 
       var uploads = Path.Combine(route, file.FileName); 

       using (var fileStream = new FileStream(uploads,FileMode.Create)) 
       { 
        await file.CopyToAsync(fileStream); 
       } 


       fileModels = FileFinder.GetFiles(route); 
      } 
      catch (Exception e) 
      { 
       throw new ArgumentException(e.Message); 
      } 
      return fileModels; 
     } 

AngularJs

viewModel.uploadFile = function() { 

      let regionName = "TestRegion"; 
      let propertyName = "TestProperty"; 

      let data = viewModel.getFormData(); 

      let request = new XMLHttpRequest(); 
      request.addEventListener("progress", viewModel.updateProgressBar, false); 
      request.addEventListener("load", transferComplete, false); 

      viewModel.isUploading = true; 
      request.open("POST", "/api/file/uploadFile/" + regionName + "/" + propertyName); 
      request.send(data); 
     } 

    /*gets selected file converts to form data*/ 
    viewModel.getFormData = function() { 
     var formData = new FormData(); 
     if (viewModel.file) { 
      formData.append("myFile",viewModel.file); 
     } 
     return formData; 
    } 

を、私のファイルは、すべてのnullです時間。なぜ私は理解できません。

UPDATE変更後の

angularJs：

viewModel.uploadFile = function() { 

     let regionName = viewModel.region.name; 
     let propertyName = viewModel.property.name; 
     let postUrl = "/api/file/uploadFile/" + regionName + "-" + propertyName; 

     let formData = new FormData(); 
     if (viewModel.file) { 
      formData.append("file", viewModel.file); 
     } 

     let request = new XMLHttpRequest(); 
     // request.addEventListener("progress", viewModel.updateProgressBar, false); 
     request.addEventListener("load", transferComplete, false); 

     viewModel.isUploading = true; 


     request.open("POST", postUrl); 
     request.setRequestHeader("Content-Type", "multipart/form-data"); 

     request.send(formData[0]); 
    } 

CS：

[HttpPost] 
     [Route("uploadFile/{path}")] 
     [Consumes("multipart/form-data")] 
     public async Task<IActionResult> Post(IFormFile file, string path) 
     { 
      var formattedPath = FilePathFormatter.FormatFolder(path); 
      var newPath = PathCreator.CreateFolder(_baseRoot,formattedPath); 

      var size = file.Length; 
       if (file.Length > 0) 
       { 
        using (var stream = new FileStream(newPath,FileMode.Create)) 
        { 
         await file.CopyToAsync(stream); 
        } 
       } 

      return Ok(new {size, newPath}); 
     } 

要求ヘッダー

私はあなたの問題はあなたの形式のファイル入力要素の名前はアクションメソッドのパラメータの名前と一致しなければならないということだと思います

Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-US,en;q=0.8 
Cache-Control:no-cache 
Connection:keep-alive 
Content-Length:0 
Content-Type:multipart/form-data 
Cookie:.AspNetCore.Identity.Application=CfDJ8Jb7vPJ0S0dGnlF8mEfQj9lVY7ccwabgngMkzgRgijxfOqen20J0y2DkgaND5M-EtULRMv8Kun0dSchlF22T6faFlxcybpMs5PhwJ6lRznXHBAV7irCmufJu1NhRUfIvMwQBwj9dE862lPsuKUa3sNh9kUYJ6C2pjiGymMNP25NZfJKwJuMA2ewzD9iZnlk5x5E2UMzbhZH9f6Ks_VPLZ4MlNNerwiLV2mya1QaeOv9AXFi4DKOkEu64IfCNGocipF4wP-anP4FkAN1sZOXJcD52KSruxxoj3Yagl6miAZ1788tT-CBZVvgbSWBHOei7Qcm8BiDdMp6KxtQs30m-_MyrbSnMP2GG26rjDwqwsoXopjU7G3KjLu8lc8dOjZGCGLa2Yc5WF63zOis4_5CZdYwFugqA5Mg1qo8mI5xxoYZVOUR1lWbtV5H-MC2geOMH06B4s_OBt59ZP6IJfIDeKpzcDB-hBmC3EE6pW9-wVSmTwfklyMkR2dsWfrKVcQBcQKUXRhSE8YaL6UARqLXBPP9RTbMV8gybZ6SX3h1lGvsp60wW__cRbo6mKwnko-JH-FiO6ctJzI6ciETCOcaz2QSTMYZVIwEX9CYKR9VKw9MUAZCzFguJSYzSCUPCG8TXGr9MyR6HoMgqCpkHfwc522o; io=7RfOJO9stPcX4wFFAAAB 
Host:localhost:57155 
Origin:http://localhost:57155 
Pragma:no-cache 
Referer:http://localhost:57155/Files/Upload 
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 

一般

Request URL:some url here 
Request Method:POST 
Status Code:500 Internal Server Error 
Remote Address:[::1]:57155 

要求ペイロード

------WebKitFormBoundaryhpPhzjBM0NH4f7IA-- 

Answer 1

アップロードされたファイルを受信します。

例では、アクションメソッドのパラメータ名はfilesですが、フォームのファイル入力要素の名前はmyFileです。 myFileの名前をfilesに変更してください。