IFormFile всегда пуст в Asp.Net основной WebAPI

у меня проблема здесь, когда я пытаюсь нажать данные с контроллером angularjs. Но то, что я делаю (файл IFormFile), всегда пусто. Есть только некоторые примеры с синтаксисом razor, но нет примеров, как это сделать с angular или jquery.

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>
: 

(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
    };
    }]);
})();

контроллер

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 ядро webapi:

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

        ....
        return ...;
    }

Я также попытался сделать это с formdata, так как он создается при публикации с синтаксисом бритвы. Что-то вроде этого:--6--> 

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

также вместо formData для предоставления raw-файла, как я написал в комментарии. Но все равно ничего не происходит!--6-->

8
angularjs asp.net asp.net-core file-upload

3 ответов

вот как это сделать с 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) {

                });
}

и в веб-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;
 .....
}

или такой: 

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

            foreach (var file in f)
            {
                //....
             }           
    }
19

IFormFile будет работать, только если имя ввода совпадает с именем параметра метода. В вашем случае имя ввода - "файлы", а имя параметра метода - "файл". Сделайте их такими же, и это должно сработать.

12

вы можете сделать это также с Kendo загрузить гораздо проще:

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