2016-07-01 16 views
7

Mam problem tutaj, gdy próbuję przesłać dane za pomocą kontrolera angularjs. Ale to, co robię (plik IFormFile) jest zawsze puste. Istnieje tylko kilka przykładów ze składnią brzytwy, ale nie ma przykładów, jak to zrobić za pomocą kątowego lub jquery.IFormFile jest zawsze pusty w Asp.Net Core WebAPI

HTML:

<form class="form-body" enctype="multipart/form-data" name="newFileForm" ng-submit="vm.addFile()"><input type="file" id="file1" name="file" multiple ng-files="getTheFiles($files)"/></form> 

dyrektywa:

(function() { 
'use strict'; 

angular 
    .module('app') 
    .directive('ngFiles', ['$parse', function ($parse) { 

    function fn_link(scope, element, attrs) { 
     var onChange = $parse(attrs.ngFiles); 
     element.on('change', function (event) { 
      onChange(scope, { $files: event.target.files }); 
     }); 
    }; 

    return { 
     link: fn_link 
    }; 
    }]); 
})(); 

Controller

var formdata = new FormData(); 
    $scope.getTheFiles = function ($files) { 
     angular.forEach($files, function (key, value) { 
      formdata.append(key, value); 
     }); 
    }; 

vm.addFile = function() {            
     var xhr = new XMLHttpRequest(); 
     xhr.open('POST', url, true); 
     xhr.setRequestHeader("Content-Type", "undefined"); 
     xhr.send(formdata);   
    } 

Asp.net rdzeń WebAPI:

[HttpPost] 
    public async Task<IActionResult> PostProductProjectFile(IFormFile file) 
    { 
     if (!ModelState.IsValid) 
     { 
      return BadRequest(ModelState); 
     } 

     .... 
     return ...; 
    } 

Próbowałem również zrobić to za pomocą formularza, ponieważ jest on konstruowany, gdy publikujesz go za pomocą składni brzytwy. Coś takiego:

dataService.addFile(formdata, { 
      contentDisposition: "form-data; name=\"files\"; filename=\"C:\\Users\\UserName\\Desktop\\snip_20160420091420.png\"", 
      contentType: "multipart/form-data", 
        headers: { 
         "Content-Disposition": "form-data; name=\"files\"; filename=\"C:\\Users\\UserName\\Desktop\\snip_20160420091420.png\"", 
         'Content-Type': "image/png" 
        }, 
        fileName: "C:\\Users\\UserName\\Desktop\\snip_20160420091420.png", 
        name: "files", 
        length : 3563 
      } 

Również zamiast formData, aby zapewnić surowe pliku, jak napisałem w komentarzu. Ale nadal nic się nie dzieje

+0

Pomoże Ci to, jeśli możesz udostępnić, jak wygląda Twój obiekt żądania (nie jestem zainteresowany zawartością pliku, ale wszystko inne). Możesz go pobrać z diagnostyki narzędzi programistycznych przeglądarki. –

+0

To kiedy to rawfile 'lastModified: 1461136463443 lastmodifieddate: Wed 20 kwietnia 2016 09:14:23 GMT + 0200 (W. Europa Daylight Time) nazwa: "snip_20160420091420.png" rozmiar: 3563 typu:” image/png " webkitRelativePath:" "' A kiedy jest to dane formularza, niż nie mogę go przeczytać, jest to po prostu __proto __: FormData' – error505

Odpowiedz

13

To jak to zrobić z angularjs:

vm.addFile = function() {      
       var fileUpload = $("#file").get(0); 
       var files = fileUpload.files; 
       var data = new FormData(); 
       for (var i = 0; i < files.length ; i++) { 
        data.append(files[i].name, files[i]); 
       } 


       $http.post("/api/Files/", data, { 
        headers: { 'Content-Type': undefined }, 
        transformRequest: angular.identity 
       }).success(function (data, status, headers, config) { 

       }).error(function (data, status, headers, config) { 

       }); 
} 

A Web API:

[HttpPost] 
public async Task<IActionResult> PostFile() 
{ 
//Read all files from angularjs FormData post request 
var files = Request.Form.Files; 
var strigValue = Request.Form.Keys; 
..... 
} 

Albo tak:

[HttpPost] 
    public async Task<IActionResult> PostFiles(IFormCollection collection) 
    { 
     var f = collection.Files;       

      foreach (var file in f) 
      { 
       //.... 
      }   
    } 
+0

Dzięki, pracuj dla mnie! – m2pathan

2

Można zrobić to także z Kendo ładowanie znacznie prostsze:

$("#files").kendoUpload({ 
     async: { 
      saveUrl: dataService.upload, 
      removeUrl: dataService.remove, 
      autoUpload: false            
     }, 
     success: onSuccess, 
     files: files 
    }); 
7

Plik IFormFile będzie działać tylko wtedy, gdy wprowadzona nazwa będzie taka sama, jak nazwa parametru metody. W twoim przypadku nazwa wejściowa to "pliki", a nazwa parametru metody to "plik". Zrób je tak samo i powinno działać.

+0

Próbowałem to rozgryźć od wielu godzin, a to był brakujący element dla mnie. – Quanta

+0

Dziękuję koleś! Holly crap walczy o to od wieków. – Yodacheese