ASP.NET Core MVC 5通过模型上传图片时FormData参数类型错误问题

问题1：FormData构造报错解决 #

• 错误原因：你在onclick="UploadForm()"里调用函数时，函数内部的this指向的是被点击的提交按钮，不是<form>元素，所以传入FormData的参数类型不符合要求，同时你没有阻止提交按钮的默认同步提交行为，会导致表单重复提交。
• 修复步骤：
  1. 给表单添加id属性，修改Html.BeginForm代码：

  @using (Html.BeginForm("ProductAdd", "Admin", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "productAddForm" }))
  

  2. 修改提交按钮的点击事件，传入事件对象：

  <input type="submit" name="Submit" class="btn btn-primary" onclick="UploadForm(event)" />
  

  3. 修改JS代码，获取正确的表单元素，同时阻止默认提交行为：

  var UploadForm = function (e) {
      // 阻止默认表单同步提交
      e.preventDefault();
      var thumbnail = $("#Thumbnailbrowse").get(0).files;
      // 直接通过id获取表单元素
      var form = document.getElementById("productAddForm");
      var data = new FormData(form);
      // 如果你已经给文件控件添加了和模型属性一致的name属性，这行append可以省略
      // data.append("ThumbnailImageFile", thumbnail[0]);
      $.ajax({
          type: "Post",
          url: "/admin/ProductAdd",
          data: data,
          contentType: false,
          processData: false,
          success: function (response) {
              // 处理返回结果
          }
      });
  };
  

问题2：HttpPostedFileWrapper不存在报错解决 #

• 错误原因：HttpPostedFileWrapper是.NET Framework版本ASP.NET MVC的专属类，ASP.NET Core中已经废弃了这个类型，Core中统一使用IFormFile接口处理上传文件。
• 修复步骤：
  1. 修改模型代码，删除无用的using System.Web;引用，替换属性类型：

  using Microsoft.AspNetCore.Http;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using System.Drawing;
  
  namespace AirmotionEcommerceWebsite.Models.Admin
  {
      public class AddWebProductModel
      {
          public TwebProduct product { get; set; }
          // 替换为IFormFile类型
          public IFormFile ThumbnailImageFile { get; set; }
      }
  }
  

  2. 给缩略图上传控件添加name属性，值和模型属性名保持一致，保证模型绑定能正确识别：

  <input type="file" id="Thumbnailbrowse" name="ThumbnailImageFile">
  

额外注意事项 #

控制器的ProductAdd接口直接用AddWebProductModel作为参数即可，ASP.NET Core会自动完成包括文件在内的所有模型绑定：

[HttpPost]
public IActionResult ProductAdd(AddWebProductModel model)
{
    // 可以直接通过model.ThumbnailImageFile获取上传的缩略图文件
    // 业务逻辑处理
    return Json(new { success = true });
}

如果需要上传多图，给多图控件也加上对应name，模型里加public List<IFormFile> GalleryImages { get; set; }属性即可完成绑定。

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