更新页点击更新按钮时如何将IFormFile图片数据从视图传递到控制器

DevOps 小满

2026-10-4

实现方案

前端视图配置

表单必须添加enctype="multipart/form-data"属性，这是后端能识别到IFormFile类型参数的前提，缺少该属性文件内容不会被正常封装到请求体中。
页面内保留<input type="file" name="uploadImg" hidden />文件选择控件：如果用户需要更新图片，触发该控件的文件选择逻辑；如果不需要更新，该控件留空即可，无需额外处理已经显示在页面上的旧图片。
如果是表单同步提交，浏览器会自动把选中的文件内容按照multipart/form-data格式发送到后端。如果是AJAX异步提交，需要手动构造FormData对象装载数据，示例代码如下：

// 构造提交数据对象
const submitFormData = new FormData();
// 追加选中的图片文件
const imgFile = document.querySelector('input[name="uploadImg"]').files[0];
if (imgFile) {
  submitFormData.append('uploadImg', imgFile);
}
// 追加其他更新所需的表单字段
submitFormData.append('dataId', 1001);
submitFormData.append('title', '更新的内容标题');
// 发送请求
fetch('/你的控制器名/你的更新方法名', {
  method: 'POST',
  body: submitFormData
}).then(res => res.json()).then(res => {
  // 处理返回结果
})

后端控制器配置

接口参数名要和前端提交的文件字段名完全对应，参数类型声明为IFormFile即可，示例代码如下：

[HttpPost]
public IActionResult 你的更新方法名(int dataId, string title, IFormFile uploadImg)
{
    // 业务逻辑：如果uploadImg不为空说明用户上传了新图片，执行新图片存储逻辑，覆盖原有图片关联
    if (uploadImg != null && uploadImg.Length > 0)
    {
        // 你的图片存储、关联业务字段逻辑
    }
    // 剩余更新逻辑执行
    return Ok();
}