如何通过ajax发送多张图片并通过视图模型接收？

Question

假设我有这个 ViewModel

public class AlbumViewModel
{
    public string AlbumDescription { get; set; }
    public List<FormFile> CuteImages { get; set; }
    public List<FormFile> BadImages { get; set; }
}

这个表格

<form id="AlbumForm" method="POST" enctype="multipart/form-data">
    <input type="text" name="AlbumDescription" />
    <input type="file" name="CuteImages" multiple/>
    <input type="file" name="BadImages" multiple/>
    <button type="button">Send</button>
</form>

这个Javascript

$("button").click(function () {
    let form = document.getElementById("AlbumForm")

    $.ajax({
        type: "POST",
        url: "Album/Add",
        contentType: false,
        processData: false,
        data: new FormData(form)
    });
})

还有这个相册控制器

[HttpPost]
public IActionResult Add(AlbumViewModel viewmodel)
{
    var description       = viewmodel.AlbumDescription; //OK
    var filesFromHeaven   = viewmodel.CuteImages;       //null
    var filesFromHell     = Request.Form.Files;         //OK
    ...
}

我可以从请求中获取图像，但它们在 viewmodel 中显示为 null .

描述在viewmodel, 加载文件以外的任何属性。

我需要文件来自 viewmodel 因为这样我就可以使用酷的 data-annotation 验证一切的东西。

有谁知道可能遗漏了什么？

Answer 1

您需要将模型中的 FormFile 更改为 IFormFile，如下所示：

public class AlbumViewModel
{
    public string AlbumDescription { get; set; }
    public List<IFormFile> CuteImages { get; set; }
    public List<IFormFile> BadImages { get; set; }
}

如何通过ajax发送多张图片并通过视图模型接收？

How to send multiple images through ajax and receive them through the view model?

c#

ajax

asp.net-core-mvc

asp.net-core