使用react-hook-form向ASP.NET Core Web API传图及解决空值与URL存储问题

问题1：正确传递IFormFile图片对象 #

你的前端代码存在两个核心问题：提交时传的是原始表单数据而非构造的FormData；手动设置multipart/form-data头导致Axios无法自动生成正确的请求边界，且未将所有表单字段加入FormData。

前端代码修改： #

1. 调整表单提交逻辑

修改SubmitForm函数，将所有表单字段（含图片）加入FormData，传递FormData而非原始data对象，同时移除手动设置的Content-Type（Axios会自动处理）：

const SubmitForm = async (data : FieldValues) => {
  const formData = new FormData();
  // 添加所有表单字段
  formData.append('name', data.name);
  formData.append('userName', data.userName);
  formData.append('email', data.email);
  formData.append('password', data.password);
  // 添加图片文件（直接从react-hook-form的data中获取）
  if(data.profilePhoto?.length > 0){
    formData.append('profilePhoto', data.profilePhoto[0] as File);
  }

  try{
    console.log([...formData]); // 可查看FormData内容
    // 移除手动设置的Content-Type，Axios会自动生成正确请求头
    await agent.Visitor.register(formData);
  }catch(error : any){
    console.log(error);
  }
};

2. 简化Axios配置

删除config中的Content-Type设置：

// 原config修改为（或直接移除，调用时不传config）
const config = {
  headers: {
    // 移除 "Content-Type": "multipart/form-data"
  }
};

3. 优化文件输入组件

去掉multiple属性（单图上传无需），保留预览逻辑：

<input 
  hidden 
  type="file"
  accept="image/*"
  {...register('profilePhoto', {
    required: 'Profile photo is required',
    onChange: ShowImagePreview
  })}
  id="imageFile"
/>

问题2：服务器存储图片并返回URL #

后端需要修改模型和API逻辑，将上传的图片保存到静态目录，生成可访问的URL并存储到数据库。

后端代码修改： #

1. 修改Visitor模型

将存储文件对象的字段改为存储URL的字符串：

public class Visitor : IdentityUser
{
    [Required, MaxLength(200)]
    public string Name { get; set; } 

    // 存储图片访问URL
    public string ProfilePhotoUrl { get; set; }
}

2. 创建注册DTO（接收前端数据）

用DTO专门处理表单输入和文件上传：

public class RegisterVisitorDto
{
    [Required, MaxLength(200)]
    public string Name { get; set; }

    [Required]
    public string UserName { get; set; }

    [Required, EmailAddress]
    public string Email { get; set; }

    [Required]
    public string Password { get; set; }

    // 接收上传的文件
    public IFormFile ProfilePhoto { get; set; }
}

3. 实现API注册逻辑

在Visitor控制器中处理文件保存和URL生成：

[HttpPost("register")]
public async Task<IActionResult> Register([FromForm] RegisterVisitorDto dto)
{
    if (!ModelState.IsValid)
        return BadRequest(ModelState);

    string photoUrl = null;
    if (dto.ProfilePhoto != null && dto.ProfilePhoto.Length > 0)
    {
        // 定义存储目录（需提前在wwwroot下创建ProfilePhotos文件夹）
        var uploadDir = Path.Combine(_webHostEnvironment.WebRootPath, "ProfilePhotos");
        if (!Directory.Exists(uploadDir))
            Directory.CreateDirectory(uploadDir);

        // 生成唯一文件名避免重复
        var fileName = $"{Guid.NewGuid()}_{Path.GetFileName(dto.ProfilePhoto.FileName)}";
        var filePath = Path.Combine(uploadDir, fileName);

        // 保存文件到服务器
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            await dto.ProfilePhoto.CopyToAsync(stream);
        }

        // 生成可访问的相对URL
        photoUrl = $"/ProfilePhotos/{fileName}";
    }

    // 创建Visitor实体
    var visitor = new Visitor
    {
        Name = dto.Name,
        UserName = dto.UserName,
        Email = dto.Email,
        ProfilePhotoUrl = photoUrl
    };

    // 使用Identity创建用户
    var result = await _userManager.CreateAsync(visitor, dto.Password);
    if (!result.Succeeded)
        return BadRequest(result.Errors);

    // 返回包含图片URL的用户信息
    return Ok(new 
    {
        visitor.Id,
        visitor.Name,
        visitor.UserName,
        visitor.Email,
        visitor.ProfilePhotoUrl
    });
}

4. 配置静态文件访问

确保ASP.NET Core允许访问wwwroot下的静态文件（默认已启用，若未开启则在Program.cs中添加）：

var app = builder.Build();

// ...其他中间件
app.UseStaticFiles(); // 启用静态文件访问
// ...其他中间件

前端展示图片 #

注册成功后，后端返回ProfilePhotoUrl，前端可直接拼接baseURL作为图片src：

// 假设注册成功后获取到user数据
<img src={`http://localhost:5000${user.ProfilePhotoUrl}`} alt="Profile" />

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