JS上传文件至C#接口，ViewModel中Item的Attachments未接收文件

你的问题出在FormData的键名格式不符合ASP.NET Core模型绑定要求，导致文件无法映射到Item的Attachments集合中——虽然后端能收到文件，但模型绑定无法将其关联到指定Item的对应属性上。

核心原因 #

ASP.NET Core对嵌套集合的模型绑定有严格命名规则：当绑定List<Item>中某个Item的List<IFormFile> Attachments时，键名需要包含两层索引：

• 外层索引：指定属于Items列表中的第几个Item
• 内层索引：指定属于该Item的Attachments列表中的第几个文件

你当前的键名Items[${itemIndex}].Attachments缺少内层文件索引，模型绑定无法识别该文件应该放入集合的哪个位置。

修复步骤 #

1. 修改JavaScript中的FormData追加逻辑 #

将文件追加的键名改为包含文件索引的格式：

const data = row.querySelector(`td[data-bs-column="Action"]`); 

if (data) {
    const uploadElement = data.querySelector("input[type='file']");
    if (uploadElement && uploadElement.files.length > 0) {
        const files = Array.from(uploadElement.files);
        if (files && files.length > 0) {
            files.forEach((file, fileIndex) => { 
                // 新增文件索引，符合嵌套集合的模型绑定规则
                formData.append(`Items[${itemIndex}].Attachments[${fileIndex}]`, file);
            }); 
        }
    } 
}

2. 确保请求的Content-Type设置正确 #

发送FormData时，不要手动设置Content-Type，让浏览器自动生成multipart/form-data并包含边界信息。如果使用fetch或axios，示例如下：

// fetch示例
fetch('/YourEndpoint', {
    method: 'POST',
    body: formData,
    headers: {
        'Authorization': 'Bearer ' + token
        // 不要设置Content-Type，浏览器会自动处理
    }
});

3. 后端验证（可选） #

可以在端点中直接检查绑定后的vm.Items，确认文件是否正确映射：

[HttpPost, Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
public async Task<IActionResult> JSUpdateEvaluationItems(PerformanceViewerViewModel vm)
{
    // 检查指定索引的Item的Attachments
    var targetItem = vm.Items?.FirstOrDefault(i => /* 你的匹配条件 */);
    if (targetItem?.Attachments != null)
    {
        // 这里应该能看到绑定成功的文件
        var fileCount = targetItem.Attachments.Count;
    }
    var result = await performanceRepository.UpdateEvaluationItems(vm);
    return Json(result.ToString());
}

额外注意事项 #

• 确保前端传递的itemIndex正确，对应后端Items列表中目标Item的索引位置。
• 可以在PerformanceViewerViewModel的构造函数中初始化Items = new List<Item>()，避免因Items为null导致模型绑定失败。

内容的提问来源于stack exchange，提问作者mat mat