React(TS)+.NET+SQLServer图片上传后端接收为null问题求助

我使用React(TS)+.NET+SQLServer开发Web应用，其中包含用户上传图片的功能，但目前图片无法上传，后端始终接收ImageData为null。

前端代码 #

//I storage image as byte[] at backend, so format transfer needed.
const fileToUint8Array = (file: File): Promise<Uint8Array> => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => {
                if (reader.result instanceof ArrayBuffer) {
                    const arrayBuffer = reader.result;
                    const uint8Array = new Uint8Array(arrayBuffer);
                    resolve(uint8Array);
                } else {
                    reject(new Error('Failed to read file as ArrayBuffer.'));
                }
            };
            reader.onerror = (error) => {
                reject(error);
            };
            reader.readAsArrayBuffer(file);
        });
    };

const formData = new FormData();
if (selectedFile) {
 const byteArr = await fileToUint8Array(selectedFile);
 console.log(byteArr); //here I can get byte data Uint8Array(123808) [...]
 formData.append('ImageData', new Blob([byteArr], { type: selectedFile.type }));
};

console.log('FormData before sending:', formData); 
//console output: formData before sending: FormData {}

const response = await agent.addScenery(formData, config);

console.log('Response from backend:', response); 
//console output: {sceneryId: '...', sceneryName: '...', country: '...', city: '...', imageData: null, …}

.NET后端代码 #

[Authorize]
[Route("[action]")]
[HttpPost]
[Consumes("multipart/form-data")]
public async Task<IActionResult> AddScenery([FromForm] SceneryAddRequest sceneryAddRequest)
{
Console.WriteLine($"Received add request: ImageData={sceneryAddRequest.ImageData?.Length} bytes");
...
//backend console output: Received add request: ImageData= bytes

问题排查与解决步骤 #

1. 前端冗余转换导致格式不匹配
   不需要把File转成Uint8Array再包装成Blob，直接将原始File对象添加到FormData即可——浏览器会自动处理文件的二进制传输，多此一举的转换反而会破坏后端的参数绑定逻辑。修改前端代码如下：

   const formData = new FormData();
   if (selectedFile) {
     // 直接添加原始File对象
     formData.append('ImageData', selectedFile);
   }
   
   // 正确查看FormData内容的方式（直接console.log无法显示内部数据）
   for (const [key, value] of formData.entries()) {
     console.log(`${key}:`, value);
   }
   

2. 后端接收模型类型修正
   .NET处理multipart/form-data格式的文件上传，原生推荐用IFormFile类型接收，而非直接用byte[]。检查并修改你的SceneryAddRequest模型：

   public class SceneryAddRequest
   {
       // 其他属性保持不变
       public IFormFile ImageData { get; set; }
   }
   

   之后在接口方法中将IFormFile转换为byte[]用于数据库存储：

   using var memoryStream = new MemoryStream();
   await sceneryAddRequest.ImageData.CopyToAsync(memoryStream);
   byte[] imageBytes = memoryStream.ToArray();
   // 后续将imageBytes存入SQLServer
   

3. 额外验证点

   • 前端不要手动设置Content-Type：使用FormData时，浏览器会自动添加带boundary的multipart/form-data请求头，手动设置会导致后端解析失败。
   • 确认后端路由、请求方式与前端调用完全匹配，[FromForm]特性已正确标记在模型参数上。

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