将文件列表发布到 ajax 帖子中的控制器答案

【问题标题】：POST file list to controller in ajax post将文件列表发布到 ajax 帖子中的控制器
【发布时间】：2021-05-21 10:04:59
【问题描述】：

我尝试上传文档，但我无法通过列出我的控制器参数。我的情况是：

用户单击“选择文件”按钮并选择文件并按完成
然后我的一些函数获取文件列表并通过 POST merhod 传递给控制器以在本地保存，如下所示：

查看端：（获取文件列表）

   function saveDocuments(documentList) {
        if (documentList.length > 0)
        {
            var formList = new Array;
            for (var i = 0; i < documentList.length; i++) {
                var form = new FormData();
                var file = documentList[i];

                form.append('FormFile', file);
                formList.push(form);
                }
                 savePhysicalFile(formList);
              }
         }

查看端：（发布文件列表）

 function savePhysicalFile(formData)
    {
        if (formData != null)
        {
            $.ajax({
                url: "Installation/SavePhysicalPath",
                type: 'POST',
                dataType: "json",
                contentType: "multipart/form-data",
                data:formData,
                processData: false,
                contentType: false,
                success: function (result) {
                    console.log("Success", result);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }
    }

在我的控制器端；参数“模型”始终为空。我不能在这里通过查看侧列表。我怎么知道？

控制器端

public JsonResult SavePhysicalPath([FromForm] List<FileModel> model)
        {
            var savingRootPath = @"C:\MyDocuments";

            //I'm doing save locally
           
            return Json(savingRootPath);
        }

模型端

    public class FileModel
    {
        public string Files { get; set; }

        public IFormFile FormFile { get; set; }
    }

【问题讨论】：

标签： javascript asp.net-mvc asp.net-core jquery-file-upload ajaxform

【解决方案1】：

从您的代码中，您可能需要注意两点：

1.对于复杂类型的每个属性，模型绑定会在源中查找名称模式prefix.property_name。如果什么也没找到，它只查找property_name 而没有prefix。对于您在后端收到的model 是一个列表，您需要给出类似的名称：[index].FormFile 或model[index].FormFile。

2.你的模型有一个IFormFile，你的动作接收一个列表模型，如果你只传递IFormFile你需要删除FromForm属性并确保没有[ApiController]。它是一个known github issue和这已移至 Next sprint planning 里程碑。

这是一个完整的工作演示：

查看：

<input type="file" multiple onchange="saveDocuments(this.files)"/>
<div class="form-group">
    <input type="button" value="Submit" id="submit" class="btn btn-primary" />
</div>

@section Scripts
{
    <script>
        function saveDocuments(documentList) {
            if (documentList.length > 0) {
                var form = new FormData();
                for (var i = 0; i < documentList.length; i++) {                    
                    var file = documentList[i];                    
                    //change here
                    form.append('model['+i+'].FormFile', file);
                }
                savePhysicalFile(form);
            }
        }    
        function savePhysicalFile(formData) {
            if (formData != null) {
                $.ajax({
                    url: "/Installation/SavePhysicalPath",
                    type: 'POST',
                    dataType: "json",
                    contentType: "multipart/form-data",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        console.log("Success", result);
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            }
        }
    </script>
}

控制器：

[HttpPost]
public JsonResult SavePhysicalPath(List<FileModel> model)
{
    var savingRootPath = @"C:\MyDocuments";

    //I'm doing save locally

    return Json(savingRootPath);
}

结果：

【讨论】：