POST 文件列表到 ajax post 中的控制器

Question

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

用户单击“选择文件”按钮并选择文件并按完成
然后我的一些函数获取文件列表并通过 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);
              }
         }

查看方：（post文件列表）

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

Answer 1

从你的代码来看，你可能要注意两点：

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

2.Your 模型有一个 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);
}

结果：

POST 文件列表到 ajax post 中的控制器

POST file list to controller in ajax post

javascript

asp.net-mvc

ajaxform

jquery-file-upload

asp.net-core