ASP.NET MVC文件上传报错CS1061 file输入框不显示修复

错误根因 #

你遇到的CS1061编译错误、file类型上传框不显示两个问题，均来自视图层Html.TextBoxFor辅助方法的用法错误，和模型定义无关——PostAddRequest类中已经正确定义了GalleryImages属性，编译报错是Razor视图传参错误导致视图编译阶段无法正确识别属性，错误参数同时也导致file输入框无法正常渲染。

具体修复步骤 #

1. 修复单张特色图上传输入框 #

当前特色图的TextBoxFor参数存在嵌套错误，htmlAttributes不需要额外嵌套一层同名键，直接将属性写入匿名对象即可，修正后代码：

<div class="form-group">
    @Html.LabelFor(model => model.FeaturedImage, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.FeaturedImage, new { type = "file", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.FeaturedImage, "", new { @class = "text-danger" })
    </div>
</div>

原写法多嵌套了一层htmlAttributes = new {}，导致type="file"属性没有被渲染到input标签上，因此文件选择框无法显示。

2. 修复多图上传输入框，解决CS1061编译错误 #

多图上传的TextBoxFor方法参数顺序错误：强类型版本的TextBoxFor仅接收两个核心参数（属性表达式、HTML特性对象），你之前额外传入的空字符串作为第二个参数，会导致辅助方法匹配到弱类型重载，无法识别lambda表达式指向的GalleryImages属性，触发CS1061错误，同时无法正确渲染多文件上传控件。
修正后多图上传代码：

<div class="form-group">
    @Html.LabelFor(model => model.GalleryImages, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.GalleryImages, new { type = "file", multiple = "multiple", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.GalleryImages, "", new { @class = "text-danger" })
    </div>
</div>

注意：multiple是HTML原生属性，不需要加@前缀，只有和C#关键字重名的属性（比如class）才需要加@转义。

3. 后台Post动作方法校验 #

确保Post版本的Create动作方法签名正确接收文件数据，参考如下实现：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(PostAddRequest model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }
    // 处理特色图存储：校验model.FeaturedImage的文件类型、大小，保存到指定目录，将存储路径赋值给model.FeaturedImagePath
    // 处理图库图存储：遍历model.GalleryImages数组，逐个校验并保存文件，将所有文件的存储路径存入model.GalleryImagesPath
    // 完成数据持久化后跳转
    return RedirectToAction("Index");
}

现有表单已经正确配置enctype = "multipart/form-data"属性，符合文件上传要求，不需要修改。

4. 可选验证规则优化 #

如果需要强制用户上传图片，可在模型属性上补充验证特性：

public class PostAddRequest
{
    public string Title { get; set; }
    public string Description { get; set; }
    public string Content { get; set; }
    public int CategoryId { get; set; }
    public string FeaturedImagePath { get; set; }
    [Required(ErrorMessage = "请上传特色图片")]
    public HttpPostedFileBase FeaturedImage { get; set; }
    public List<string> GalleryImagesPath { get; set; }
    [Required(ErrorMessage = "请至少上传一张图库图片")]
    public HttpPostedFileBase[] GalleryImages { get; set; }
}

修改完成后重新生成项目，编译错误会直接消失，两个文件上传控件可正常渲染，单图、多图都能正常提交到后台接口。

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