如何使用IFormFile通过Ajax（knockout.js）上传Asp.net核心中的文件

Question

以下是我用于加载图片和其他数据的模型。

public class SubCategoryTwoViewModel
    {
        public long Id { get; set; }
        public string SubCatTwoName { get; set; }
        public CategoryViewModel Category { get; set; }
        public SubCategoryOneViewModel SubCatOne { get; set; }
        public string PictureUrl { get; set; }
        public IFormFile File { get; set; } 
        public UserViewModel AddedBy { get; set; }
        public DateTime AddedOn { get; set; }
        public UserViewModel Updated_By { get; set; }
        public DateTime? UpdatedOn { get; set; }
        public bool Active { get; set; }

    }

控制器方法

[HttpPost]
public JsonResult AddEditSubCategoryTwo([FromBody] SubCategoryTwoViewModel model)
   {
   }

将数据传递给控制器​​的Knockout方法

AddEditSubCategorytwo: function () {
        var self = this;
            var ajaxUrl = ApplicationRootUrl("AddEditSubCategoryTwo", "Category");
            var logo = $('#subCatFile')[0].files[0];
            var subCategoryTwoModel = {
                SubCatTwoName: self.subCatTwoName(),
                Category: {
                    CategoryId: self.selectCategory()
                },
                SubCatOne: {
                    SubCategoryOneId: self.selectCategorytwo()
                }, 
                Active: self.active(),
                File: logo
            }; 
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: ajaxUrl,
                dataType: "json",
                data: ko.toJSON(subCategoryTwoModel),
                success: function (data) {
                },
                error: function (err) {
                }
            });
    },

这是Html代码

<form class="form-horizontal" id="SubCategorytwoValidation">
                            <div class="form-group">
                                <label class="control-label col-sm-4">Sub Category Name</label>
                                <div class="col-sm-8">
                                    <input type="text" name="SubCategorytwoName" data-bind="textinput: subCatTwoName" class="form-control" placeholder="Enter Sub Category Name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-4">Category Name</label>
                                <div class="col-sm-8">
                                    <select name="categoryName" class="selectpicker" data-live-search="true" data-bind="selectPicker:true, options:categoryResponseData, value:selectCategory,optionsText:'categoryName',optionsValue:'categoryId', optionsCaption: ' ---Select Category---'"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-4">Sub Category Name</label>
                                <div class="col-sm-8">
                                    <select name="SubCategoryoneName" class="selectpicker" data-live-search="true" data-bind="selectPicker:true, options:subCategoryByCategoryId, value:selectCategorytwo,optionsText:'subCatOneName',optionsValue:'subCategoryOneId', optionsCaption: ' ---Select Sub Category---'"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-4">Image</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <!-- image-preview-filename input [CUT FROM HERE]-->
                                        <div class="input-group image-preview">
                                            <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
                                            <span class="input-group-btn">
                                                <!-- image-preview-clear button -->
                                                <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                                                    <span class="glyphicon glyphicon-remove"></span> Clear
                                                </button>
                                                <!-- image-preview-input -->
                                                <div class="btn btn-default image-preview-input">
                                                    <span class="glyphicon glyphicon-folder-open"></span>
                                                    <input type="file" id="subCatFile" name="subCatFile" /> <!-- rename it -->
                                                </div>
                                            </span>
                                        </div><!-- /input-group image-preview [TO HERE]-->
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-4">Active</label>
                                <div class="col-sm-8">
                                    <input data-bind="bootstrapToggleOn: active" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="primary" data-offstyle="danger" type="checkbox">
                                </div>
                            </div>
                        </form>

问题是我在IFormFile File属性中得到一个空值。我，我得到除File属性之外的其他属性值。我正在使用knockout.js

我已经关注了其他链接http://www.binaryintellect.net/articles/f1cee257-378a-42c1-9f2f-075a3aed1d98.aspx Posting files and model to controller in ASP.NET Core MVC6 但仍然无法解决这个问题。可以请任何人让我知道如何传递数据以及图像