ASP.NET MVC 8.0+SQL Server下wwwroot文件夹图片上传与编辑方案问询

一、基础准备 #

先在wwwroot下创建存放图片的文件夹，比如wwwroot/book-images，开发环境默认具备写入权限，部署时需确保目标服务器该目录有写入权限。

二、图片上传实现（新增图书场景） #

1. 定义ViewModel（推荐） #

实体类的BookImage仅存储文件路径，需新增ViewModel来接收上传的文件：

public class BookCreateViewModel
{
    public string Title { get; set; } = null!;
    public string Author { get; set; } = null!;
    public string Publisher { get; set; } = null!;
    public int YearPublished { get; set; }
    public int CategoryId { get; set; }
    public int Quantity { get; set; }
    public int Available { get; set; }
    // 接收上传的图片文件
    public IFormFile? BookImageFile { get; set; }
}

2. 前端表单配置 #

新增图书页面的表单必须添加enctype="multipart/form-data"才能支持文件上传：

<form method="post" enctype="multipart/form-data">
    <div>
        <label>书名:</label>
        <input asp-for="Model.Title" />
    </div>
    <!-- 省略其他字段的表单元素 -->
    <div>
        <label>图书封面:</label>
        <input asp-for="Model.BookImageFile" type="file" accept="image/*" />
    </div>
    <button type="submit">保存图书</button>
</form>

3. 后台逻辑处理（以Razor页面为例） #

在Create.cshtml.cs中注入IWebHostEnvironment获取wwwroot路径，然后实现文件保存与数据库写入：

private readonly YourDbContext _context;
private readonly IWebHostEnvironment _webHostEnv;

public CreateModel(YourDbContext context, IWebHostEnvironment webHostEnv)
{
    _context = context;
    _webHostEnv = webHostEnv;
}

public async Task<IActionResult> OnPostAsync(BookCreateViewModel model)
{
    if (!ModelState.IsValid) return Page();

    string imagePath = "/book-images/default-book.jpg"; // 默认图片路径
    if (model.BookImageFile != null && model.BookImageFile.Length > 0)
    {
        // 生成唯一文件名避免重名覆盖
        var fileName = $"{Guid.NewGuid()}{Path.GetExtension(model.BookImageFile.FileName)}";
        var savePath = Path.Combine(_webHostEnv.WebRootPath, "book-images", fileName);
        
        // 保存文件到wwwroot
        using var stream = new FileStream(savePath, FileMode.Create);
        await model.BookImageFile.CopyToAsync(stream);
        
        // 存储相对路径到数据库
        imagePath = $"/book-images/{fileName}";
    }

    // 映射到实体类并保存
    var book = new Book
    {
        Title = model.Title,
        Author = model.Author,
        Publisher = model.Publisher,
        YearPublished = model.YearPublished,
        CategoryId = model.CategoryId,
        Quantity = model.Quantity,
        Available = model.Available,
        BookImage = imagePath
    };
    _context.Books.Add(book);
    await _context.SaveChangesAsync();

    return RedirectToPage("./Index");
}

三、图片编辑实现（修改图书场景） #

1. 编辑ViewModel配置 #

需要支持显示现有图片并允许替换：

public class BookEditViewModel
{
    public int BookId { get; set; }
    public string Title { get; set; } = null!;
    // 省略其他字段
    public string? CurrentBookImage { get; set; } // 当前图片路径
    public IFormFile? NewBookImageFile { get; set; } // 新上传的图片文件
}

2. 编辑页面布局 #

显示当前图片，同时提供更换图片的选项：

<form method="post" enctype="multipart/form-data">
    <input type="hidden" asp-for="Model.BookId" />
    <!-- 省略其他字段的表单元素 -->
    <div>
        <label>当前封面:</label>
        @if (!string.IsNullOrEmpty(Model.CurrentBookImage))
        {
            <img src="@Model.CurrentBookImage" style="width:120px; height:auto;" />
        }
    </div>
    <div>
        <label>更换封面:</label>
        <input asp-for="Model.NewBookImageFile" type="file" accept="image/*" />
        <p>不上传新图片则保留原封面</p>
    </div>
    <button type="submit">更新图书</button>
</form>

3. 编辑后台逻辑 #

先在OnGet方法中获取现有图书数据，再在OnPost中处理图片替换：

public async Task<IActionResult> OnGetAsync(int? id)
{
    if (id == null || _context.Books == null) return NotFound();

    var book = await _context.Books.FindAsync(id);
    if (book == null) return NotFound();

    // 映射到ViewModel
    var model = new BookEditViewModel
    {
        BookId = book.BookId,
        Title = book.Title,
        Author = book.Author,
        // 赋值其他字段
        CurrentBookImage = book.BookImage
    };
    return Page();
}

public async Task<IActionResult> OnPostAsync(BookEditViewModel model)
{
    if (!ModelState.IsValid) return Page();

    var book = await _context.Books.FindAsync(model.BookId);
    if (book == null) return NotFound();

    // 更新基础字段
    book.Title = model.Title;
    book.Author = model.Author;
    // 更新其他字段...

    // 处理图片替换
    if (model.NewBookImageFile != null && model.NewBookImageFile.Length > 0)
    {
        // 删除旧图片（默认图片除外）
        if (!string.IsNullOrEmpty(book.BookImage) && book.BookImage != "/book-images/default-book.jpg")
        {
            var oldFilePath = Path.Combine(_webHostEnv.WebRootPath, book.BookImage.TrimStart('/'));
            if (System.IO.File.Exists(oldFilePath))
            {
                System.IO.File.Delete(oldFilePath);
            }
        }

        // 保存新图片
        var fileName = $"{Guid.NewGuid()}{Path.GetExtension(model.NewBookImageFile.FileName)}";
        var savePath = Path.Combine(_webHostEnv.WebRootPath, "book-images", fileName);
        using var stream = new FileStream(savePath, FileMode.Create);
        await model.NewBookImageFile.CopyToAsync(stream);

        // 更新数据库路径
        book.BookImage = $"/book-images/{fileName}";
    }

    _context.Update(book);
    await _context.SaveChangesAsync();
    return RedirectToPage("./Index");
}

四、关键注意事项 #

• 文件类型校验：后台可通过model.NewBookImageFile.ContentType判断是否为图片类型（如image/jpeg、image/png），拦截恶意文件。
• 上传大小限制：在Program.cs中配置请求大小：

builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 10 * 1024 * 1024; // 限制为10MB
});

• 部署权限：发布到IIS时，需确保应用程序池对wwwroot/book-images目录有写入权限。

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