ASP.NET MVC如何接收react-admin提交的blob图片并保存到服务器文件夹

核心问题说明 #

你当前拿到的请求体中的event_poster字段携带的blob URL仅在当前用户的浏览器会话中有效，服务端无法直接访问该地址拉取图片，必须调整前端提交逻辑，将实际的文件二进制内容提交给后端。

前端（react-admin侧）调整 #

react-admin默认采用JSON格式提交请求，传输文件需要改为multipart/form-data格式的FormData提交，修改自定义dataProvider的对应方法即可：

import { fetchUtils, jsonServerProvider } from 'react-admin';

const baseApiUrl = '你的服务端接口根地址';
const baseDataProvider = jsonServerProvider(baseApiUrl, fetchUtils.fetchJson);

export const dataProvider = {
    ...baseDataProvider,
    create: async (resource, params) => {
        // 只针对活动资源的提交做特殊处理，其他资源走默认逻辑
        if (resource !== 'events') {
            return baseDataProvider.create(resource, params);
        }

        const { event_poster, ...normalFields } = params.data;
        const formData = new FormData();
        // 追加普通字段
        Object.keys(normalFields).forEach(key => {
            formData.append(key, normalFields[key]);
        });
        // 追加图片文件，rawFile就是实际的文件对象
        if (event_poster?.rawFile) {
            formData.append('event_poster', event_poster.rawFile, event_poster.title);
        }

        const response = await fetchUtils.fetchJson(`${baseApiUrl}/events`, {
            method: 'POST',
            body: formData
            // 不要手动设置Content-Type请求头，浏览器会自动生成带分隔符的multipart/form-data头
        });

        return { data: { ...response.json, id: response.json.id } };
    }
};

后端（ASP.NET MVC侧）处理 #

首先定义接收参数的模型类，文件字段使用IFormFile类型：

public class EventCreateRequest
{
    public string event_title { get; set; }
    public DateTime event_date { get; set; }
    public string event_description { get; set; }
    public IFormFile event_poster { get; set; }
}

控制器接收并保存文件的示例：

[ApiController]
[Route("api/events")]
public class EventsController : ControllerBase
{
    private readonly IWebHostEnvironment _webHostEnv;

    public EventsController(IWebHostEnvironment webHostEnv)
    {
        _webHostEnv = webHostEnv;
    }

    [HttpPost]
    public async Task<IActionResult> CreateEvent([FromForm] EventCreateRequest request)
    {
        if (request.event_poster == null || request.event_poster.Length == 0)
        {
            return BadRequest("未上传活动海报");
        }

        // 定义文件保存目录，示例为wwwroot/uploads
        var saveDir = Path.Combine(_webHostEnv.WebRootPath, "uploads");
        if (!Directory.Exists(saveDir))
        {
            Directory.CreateDirectory(saveDir);
        }

        // 生成唯一文件名避免重名覆盖
        var saveFileName = $"{Guid.NewGuid()}_{request.event_poster.FileName}";
        var fullSavePath = Path.Combine(saveDir, saveFileName);

        // 写入文件到本地目录
        using (var fileStream = new FileStream(fullSavePath, FileMode.Create))
        {
            await request.event_poster.CopyToAsync(fileStream);
        }

        // 此处可将文件访问路径（如 /uploads/xxx.jpg）写入数据库，后续业务逻辑省略
        return Ok(new { id = Guid.NewGuid(), request.event_title, poster_url = $"/uploads/{saveFileName}" });
    }
}

注意事项 #

• 保存文件时建议给文件名加上随机前缀（如GUID），避免重名文件覆盖
• 确保服务端的上传文件夹配置了进程的写入权限
• 如果是ASP.NET MVC非Core版本，将IFormFile替换为HttpPostedFileBase，通过HttpContext.Request.Files获取上传文件即可

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