【问题标题】:IFormFile is always empty in Asp.Net Core WebAPIAsp.Net Core WebAPI 中的 IFormFile 始终为空
【发布时间】:2016-07-01 11:23:14
【问题描述】:

我在尝试使用 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,因为它是在您使用 razor 语法发布时构建的。像这样的:

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
            }

也代替 formData 来提供原始文件,正如我在评论中所写的那样。但仍然没有任何反应

【问题讨论】:

  • 如果您可以分享您的请求正文的外观将会有所帮助(我对发布的文件内容不感兴趣,但其他所有内容)。您可以从浏览器的开发者工具诊断中获取它。
  • 这是 rawfile lastModified:1461136463443 lastModifiedDate:Wed Apr 20 2016 09:14:23 GMT+0200 (W. Europe Daylight Time) name:"snip_20160420091420.png" size:3563 type:"image/png" webkitRelativePath:"" 当它是表单数据时,我无法读取它,它只是 __proto__:FormData

标签: asp.net angularjs file-upload asp.net-core


【解决方案1】:

IFormFile 仅在您输入的名称与您的方法参数名称相同时才有效。在您的情况下,输入名称是“文件”,方法参数名称是“文件”。使它们相同,它应该可以工作。

【讨论】:

  • 我已经尝试了好几个小时,但对我来说,这是缺失的部分。
  • 谢谢老兄! Holly crap 多年来一直在为此苦苦挣扎。
  • 我已经为此苦苦挣扎了几天。由于某种原因,它无法运行,运行 dotnet core 2.1 API 控制器。接受的答案有效。
  • 惊人的绝妙答案
【解决方案2】:

这是使用 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) {

                });
}

在 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;
 .....
}

或者像这样:

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

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

【讨论】:

  • 谢谢,不用“transformRequest: angular.identity”也可以,只要加上“'Content-Type': undefined”就够了。
【解决方案3】:

您也可以通过更简单的剑道上传来做到这一点:

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

【讨论】:

    【解决方案4】:

    来自@Tony Steele 的回答。 这是代码示例(在哪里更改/照顾)

    .NET Core 3.1 LTS

    [Route("UploadAttachment")]
    [HttpPost]
    public async Task<IActionResult> UploadAttachment(List<IFormFile> formFiles)
    {
        return Ok(await _services.UploadAttachment(formFiles));
    }
    

    AngularJS

    var formFiles = new FormData();
    if ($scope.files != undefined) {
        for (var i = 0; i < $scope.files.length; i++) {
           formFiles.append('formFiles', $scope.files[i]);
        }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-09-30
      • 2018-04-20
      • 1970-01-01
      相关资源
      最近更新 更多