如何将上传文件发送到控制器 - 文件始终为空答案

【问题标题】：How to send upload file to controller - files is always empty如何将上传文件发送到控制器 - 文件始终为空
【发布时间】：2022-08-16 11:58:46
【问题描述】：

用户管理员.cshtml

<div class=\"modal-body\">
            <form id=\"upload-file-dialog-form\" 
class=\"needs-validation form-group\" novalidate 
onsubmit=\"UploadFile()\" 
enctype=\"multipart/form-data\"
method=\"post\">
                 <div class=\"col-md-10\">
                    <p>Upload one or more files using this form:</p>
                        <input type=\"file\" name=\"file_Uploader\" />
                </div>

                <div class=\"form-group\">
                    <div class=\"col-md-10 modal-footer\">
                        <input type=\"submit\" class=\"btn btn-primary\" value=\"Upload\"/>
                        
                    </div>
                </div>        
            </form>
        </div>

用户管理员.js

function UploadFile() {

var form = $(\'form\')[0]; 
var formData = new FormData(form);
console.log(formData);

$.ajax({
    url: \'/API/Upload\',
    type: \'POST\',
    data: formData,
    contentType: false, 
    processData: false,
    success: function (data) {
        
    },
    error: function () {
        
    }
});
}

控制器

[HttpPost]
    public async Task<IActionResult> Upload(List<IFileUpload> files)
    {
        try
        {
            var check = (HttpContext.Request.Form.Files);

            long size = files.Sum(f => f.Length);

            //some code removed
            return Ok(new { count = files.Count, size, filePaths });
        }
        catch (Exception exc)
        {
            logger.Error(\"Error in upload() \" + exc.Message);
            throw;
        }
    }

这文件在控制器中始终为 0。

如果 onsubmit=\"UploadFile()\" 替换为

asp-controller=\"API\" asp-action=\"Upload\"

然后我得到一些东西查看但再次将其转换为 IFileUpload 列表是另一个障碍

标签： asp.net-core file-upload asp.net-apicontroller

【解决方案1】：

首先，如果您想上传多个文件，您必须在输入中添加multiple="multiple"。如果您这样打印 FormData 将为空，您必须遍历这些项目。

<input type="file" name="file_Uploader" multiple="multiple" />

请按照下面的代码，我测试它工作。

完整的表格

<form id="upload-file-dialog-form"
      onsubmit="UploadFile(event)">
    <div class="col-md-10">
        <p>Upload one or more files using this form:</p>
        <input type="file" name="file_Uploader" multiple="multiple" />
    </div>

    <div class="form-group">
        <div class="col-md-10 modal-footer">
            <input type="submit" class="btn btn-primary" value="Upload" />
        </div>
    </div>
</form>

构造如下表单数据

<script>
    function UploadFile(e) {
        e.preventDefault();
        var formData = new FormData($('#upload-file-dialog-form')[0]);
        
        $.each($("input[type='file']")[0].files, function(i, file) {
            formData.append('files', file);
        });

        $.ajax({
            url: '/API/Upload',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {

            },
            error: function() {

            }
        });
    }
</script>

动作方法

[HttpPost]
        public async Task<IActionResult> Upload(List<IFormFile> files)
        {
            try
            {
                var check = (HttpContext.Request.Form.Files);

                long size = files.Sum(f => f.Length);

                return Ok(new { count = files.Count, size });
            }
            catch (Exception exc)
            {
                _logger.LogWarning("Error in upload() " + exc.Message);
                throw;
            }
        }

【讨论】：

【解决方案2】：

在模型类中，使用IFormFile

public List<IFormFile> file_Uploader {get;set;}"

在控制器中，像这样改变参数

public async Task<IActionResult> Upload(List<IFormFile> file_Uploader)

添加多个以上传更多文件，并保持名称属性与发布值的参数相同，代码如下：

 <input type="file" name="file_Uploader" multiple/>

结果：

【讨论】：