ASP.NET Core CRUD API中实现书籍图片字段的方案咨询

1. 更新Book实体模型 #

首先给Book类新增图片路径字段，推荐存储图片的访问路径而非二进制数据，这样更高效：

public class Book
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Author { get; set; }
    public string Genre { get; set; }
    // 新增：存储上传后图片的相对访问路径
    public string ImageUrl { get; set; }
}

更新完实体后，别忘了执行EF Core迁移命令同步数据库：

Add-Migration AddBookImageUrl
Update-Database

2. 修改POST接口以接收FormData #

原接口只能接收JSON格式数据，现在要改成支持FormData，同时接收书籍信息和图片文件：

private readonly IBookRepository _bookRepository;
private readonly IWebHostEnvironment _webHostEnvironment;

// 构造函数注入IWebHostEnvironment，用于获取静态文件目录
public BooksController(IBookRepository bookRepository, IWebHostEnvironment webHostEnvironment)
{
    _bookRepository = bookRepository;
    _webHostEnvironment = webHostEnvironment;
}

[HttpPost]
public async Task<ActionResult<List<Book>>> AddBook([FromForm] Book book, [FromForm] IFormFile? imageFile)
{
    // 处理图片上传逻辑
    if (imageFile != null && imageFile.Length > 0)
    {
        // 定义图片存储目录（wwwroot下的book-images文件夹）
        var uploadDir = Path.Combine(_webHostEnvironment.WebRootPath, "book-images");
        // 确保目录存在，不存在则创建
        if (!Directory.Exists(uploadDir))
        {
            Directory.CreateDirectory(uploadDir);
        }
        // 生成唯一文件名，避免重名覆盖
        var fileName = Guid.NewGuid().ToString() + Path.GetExtension(imageFile.FileName);
        var filePath = Path.Combine(uploadDir, fileName);
        // 将文件保存到服务器
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            await imageFile.CopyToAsync(stream);
        }
        // 设置书籍的图片访问路径（相对路径，方便前端直接访问）
        book.ImageUrl = $"/book-images/{fileName}";
    }

    // 调用仓储添加书籍
    var result = await _bookRepository.AddBook(book);
    return Ok(result);
}

3. 配置静态文件访问 #

确保项目启用了静态文件中间件（.NET 6+默认在Program.cs中已配置，若未配置则添加以下代码）：

// Program.cs
var builder = WebApplication.CreateBuilder(args);

// 添加必要服务
builder.Services.AddControllers();

var app = builder.Build();

// 启用静态文件访问，让前端能访问上传的图片
app.UseStaticFiles();

// 映射控制器路由
app.MapControllers();

app.Run();

4. 仓储层无需修改 #

你的现有仓储AddBook方法不需要任何改动，EF Core会自动识别新增的ImageUrl字段并同步到数据库。

前端FormData请求示例 #

如果用前端调用接口，需要构造FormData格式的数据：

const formData = new FormData();
// 添加书籍基本信息
formData.append('Name', '三体');
formData.append('Author', '刘慈欣');
formData.append('Genre', '科幻');
// 添加图片文件（假设input元素id为bookImage）
const imageFile = document.getElementById('bookImage').files[0];
if (imageFile) {
    formData.append('imageFile', imageFile);
}

// 发送POST请求
fetch('/api/books', {
    method: 'POST',
    body: formData
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

内容的提问来源于stack exchange，提问作者Kayron Bragança