ASP.NET Core中合并报告提交与图片上传功能的问题

问题根源 #

当前页面存在两个独立表单：主表单提交报告数据到ProcessReport，嵌套的子表单负责上传图片到Upload。点击「Add Report」时只会触发主表单的提交逻辑，嵌套表单的Upload方法完全不会被执行，导致图片保存逻辑失效。

解决方案：合并表单与后台逻辑 #

1. 修改前端CSHTML：合并表单结构 #

将嵌套的上传表单移除，把文件上传控件直接整合到主表单中，同时主表单必须声明enctype="multipart/form-data"才能正确传输文件数据。

修改后的主表单核心代码：

@model SvivaTeamVersion3.Models.ReportModel

<h4>Add Report</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <!-- 主表单添加enctype属性，支持文件上传 -->
        <form asp-action="ProcessReport" enctype="multipart/form-data">
            <!-- 原有报告字段（分类、标题、描述等）代码保持不变 -->
            <!-- ... -->

            <!-- 替换嵌套上传表单，直接保留文件选择控件 -->
            <div class="form-group">
                <label asp-for="File" class="control-label"></label>
                <input type="file" id="File_Upload" name="File" onchange="readURL(this);" accept="image/*" multiple />
                @Html.ValidationMessageFor(model => model.File, "", new { @class = "text-danger" })
                <br />
            </div>

            <!-- 原有地图、定位按钮等代码保持不变 -->
            <!-- ... -->

            <div class="form-group">
                <input type="submit" id="AddReportToDB" value="Add Report" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

2. 修改后台Controller：整合文件保存逻辑 #

将Upload方法中的文件保存逻辑迁移到ProcessReport方法中，或封装成私有方法复用，确保提交报告时同时完成图片保存。

修改后的Controller代码：

public class ReportController : Controller
{
    // 替换过时的IHostingEnvironment为官方推荐的IWebHostEnvironment
    private readonly IWebHostEnvironment _webHostEnv;

    public ReportController(IWebHostEnvironment env)
    {
        _webHostEnv = env;
    }

    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public IActionResult ProcessReport(ReportModel report)
    {
        if (!ModelState.IsValid)
        {
            return View("Create");
        }

        // 先执行图片保存逻辑
        SaveUploadedFiles(report.File);

        // 再执行报告入库逻辑
        if (ReportDAO.addReport(report))
            return View("Index");
        
        return View("Create");
    }

    // 封装文件保存的私有方法，便于后续复用
    private void SaveUploadedFiles(List<IFormFile> files)
    {
        if (files == null || files.Count == 0)
            return;

        var fileDir = "Files";
        string rootPath = Path.Combine(_webHostEnv.WebRootPath, fileDir);

        if (!Directory.Exists(rootPath))
            Directory.CreateDirectory(rootPath);

        foreach (var file in files)
        {
            if (file.Length <= 0)
                continue;

            var fullFilePath = Path.Combine(rootPath, file.FileName);
            using (var fs = System.IO.File.Create(fullFilePath))
            {
                file.CopyTo(fs);
            }
        }
    }

    // 原有的Upload方法可删除，不再需要单独调用
}

关键注意事项 #

• 表单必须设置enctype="multipart/form-data"，否则无法正确接收IFormFile类型的文件数据
• 新增ModelState.IsValid校验，确保表单数据合法后再执行后续逻辑
• 文件保存时增加空值判断，避免空引用异常
• 优先使用IWebHostEnvironment替代已过时的IHostingEnvironment

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