IFormFile属性在通过Ajax发布时获得空值（已使用的enctype =“ multipart / form-data”）

Question

我正在通过ajax提交表单，但是“ fileUpload”属性始终获得null值，我也尝试过在表单标签中包含enctype =“ multipart / form-data”，但仍然保持不变。还尝试了不同的答案，这些答案针对同一主题在其他问题上得到了答复，但没有任何效果。

HTML代码

<form method="post" class="form-horizontal offset-md-2 " role="form" id="grnUploadForm" enctype="multipart/form-data">
    <input type="hidden" asp-for="GrnVehicleUploadModel.GrnVehicleUploadProcessType" id="grnVehicleUploadProcessType" />
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="GrnVehicleUploadModel.UploadDate" for="uploadDate">Upload Date<span class="text-danger">*</span></label>
                <input type="date" asp-for="GrnVehicleUploadModel.UploadDate" class="form-control  form-control-sm shadow" id="uploadDate" required />
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="GrnVehicleUploadModel.DealerRid" for="dealerRid">Dealer <span class="text-danger">*</span></label>
                <select asp-for="GrnVehicleUploadModel.DealerRid" asp-items="@(new SelectList(Model.Dealers,"DealerRid","DealerName"))" class="selectpicker form-control  form-control-sm  shadow" data-live-search="true" data-size="5" id="dealerRid"></select>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="GrnVehicleUploadModel.BaseLocationRid" for="baseLocationRid">Location <span class="text-danger">*</span></label>
                <select asp-for="GrnVehicleUploadModel.BaseLocationRid" asp-items="@(new SelectList(Model.Locations,"LocationRid","LocationName"))" class="selectpicker form-control  form-control-sm  shadow" data-live-search="true" data-size="5" id="baseLocationRid"></select>
            </div>
        </div>


    </div>
        <div class="row " id="grn2Process">
            <div class="col-md-3">
                <div class="form-group">
                    <label asp-for="GrnVehicleUploadModel.InvoiceNumber" for="invoiceNumber">Invoice Number <span class="text-danger">*</span></label>
                    <input asp-for="GrnVehicleUploadModel.InvoiceNumber" class="form-control  form-control-sm shadow" id="invoiceNumber" required />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label asp-for="GrnVehicleUploadModel.InvoiceDate" for="invoiceDate">Invoice Date <span class="text-danger">*</span></label>
                    <input type="date" asp-for="GrnVehicleUploadModel.InvoiceDate" class="form-control  form-control-sm shadow" id="invoiceDate" required />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label asp-for="GrnVehicleUploadModel.ReceiptDate" for="receiptDate">Receipt Date <span class="text-danger">*</span></label>
                    <input type="date" asp-for="GrnVehicleUploadModel.ReceiptDate" class="form-control  form-control-sm shadow" id="receiptDate" required />
                </div>
            </div>
        </div>
    <div class="row">
        <div class='col-md-9'>
            <label for='fileUpload'>Choose Document</label>
            <label class='custom-file-label mt-4 text-muted text-wrap'>Document Name</label>
            <input asp-for="fileUpload" type='file' class='custom-file-input' onchange="fnlabelFileName();" id='fileUpload' required/>

        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-10 text-center">
            <div class="form-group">
                <button class="btn btn-sm btn-outline-success shadow" type="submit">Save</button>
                <button onclick="window.history.back()" class="btn btn-sm btn-outline-dark shadow">Cancel</button>
            </div>
        </div>
    </div>
</form>

JS

<script>

    var formId = $('#grnUploadForm');
    $(formId).on('submit', function (e) {
        $.ajax({
            url: 'FileUploadProcess',
            type: 'POST',
            data: $(formId).serializeArray(),
            success: function (response) {
                if (response.success) {
                    enablepopupModal('Successful', 'Success');
                }
                else {
                    enablepopupModal('Invalid Input', 'Warning');

                }
            },
            error: function (response) {
                enablepopupModal("Ajax Error", "Server not responding", settings = { type: 'error', modalId: 'ajaxError' });
            },
        });
        e.preventDefault();
    });



    function fnlabelFileName() {
        var fileName = $(".custom-file-input").val().split("\\").pop();
        $(".custom-file-input").siblings(".custom-file-label").addClass("selected").html(fileName);

    }
</script>

ActionMethod（控制器）：[这里我得到的是null值viewModel.fileUpload = null]

public JsonResult FileUploadProcess(GrnVehicleUploadViewModel viewModel)
        {
            //viewModel.fileUpload getting null
            var model = viewModel.GrnVehicleUploadModel;
            var errors = Validate(model);
            if (string.IsNullOrEmpty(errors))
                _jsonResponse.IsSuccess = true;
            else
                _jsonResponse.IsSuccess = false;

            return Json(new
            {
                success = _jsonResponse.IsSuccess
            });
        }

ViewModel

 public class GrnVehicleUploadViewModel
    {
        public GrnVehicleUploadViewModel()
        {
            Dealers = new List<DealerModel>();
            Locations = new List<LocationModel>();
            GrnVehicleUploadModel = new GrnVehicleUploadModel();
        }

        public IList<DealerModel> Dealers { get; set; }
        public IList<LocationModel> Locations { get; set; }
        public GrnVehicleUploadModel GrnVehicleUploadModel { get; set; }
        public IFormFile fileUpload { get; set; }

    }

Answer 1

尝试在ajax选项对象中添加（contentType：false，processData：false）

示例

$(formId).on('submit', function (e) {
    $.ajax({
        url: 'FileUploadProcess',
        type: 'POST',
        data: $(formId).serializeArray(),
        contentType: false,
        processData: false,
        success: function (response) {
            if (response.success) {
                enablepopupModal('Successful', 'Success');
            }
            else {
                enablepopupModal('Invalid Input', 'Warning');

            }
        },
        error: function (response) {
            enablepopupModal("Ajax Error", "Server not responding", settings = { type: 'error', modalId: 'ajaxError' });
        },
    });
    e.preventDefault();
});

Answer 2

我在Using ajax to post a view model which includes an IFormFile property in MVC Core上找到了答案

获取空值的原因：jQuery serializeArray（）不考虑文件输入改用FormData（请参见上面的链接）