使用Krajee Bootstrap File Input上传文件时无法获取数据

我之前也碰到过一模一样的情况，问题根源其实是前端表单字段名和后端控制器参数名不匹配，再加上HTML输入框缺了关键属性导致的。下面一步步帮你搞定：

1. 先补全HTML输入框的必要属性 #

你的<input>标签缺少name属性——ASP.NET Core的模型绑定完全依赖这个属性来识别上传的文件。如果需要支持多文件上传，记得加上multiple属性：

<input id="fileFileUpload" name="files" type="file" multiple />

2. 调整JavaScript配置（或调整控制器参数） #

Krajee File Input默认会以file作为文件参数的键名发送到后端，要是你想保留控制器里的files参数名，就得在JS配置里指定fileField属性，让组件用你设置的name值来传参：

$("#fileFileUpload").fileinput({
    showPreview: true,
    uploadAsync: false,
    uploadUrl: '/fileupload',
    fileField: 'files' // 这里要和input的name属性完全一致
});

3. 控制器端的验证 #

确保控制器方法的参数名和前端发送的键名匹配，比如按上面的配置，控制器代码可以保持原样：

[HttpPost]
public JsonResult Index(List<IFormFile> files) {
    // 现在files应该能正常获取到上传的文件了
    // 可以通过循环处理每个文件
    foreach(var file in files) {
        // 比如保存文件到服务器的逻辑
    }
    return Json(new { success = true });
}

另一种简化方案（不用改JS） #

要是不想调整JS配置，也可以直接把控制器的参数名改成组件默认的file，同时给input加上name="file"：

<input id="fileFileUpload" name="file" type="file" multiple />

[HttpPost]
public JsonResult Index(List<IFormFile> file) {
    // 处理上传的文件
}

这样调整之后，控制器就能正确接收到上传的文件了。

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