React客户端向C#服务器传输ArrayBuffer的最佳方式及类型适配

React 客户端发送类型与实现 #

可选方案1：用FormData封装（适配多字段场景） #

将ArrayBuffer转为Blob后放入FormData，适合需要同时提交其他表单数据的场景：

// 假设已有从PDF生成的pdfArrayBuffer
const pdfBlob = new Blob([pdfArrayBuffer], { type: 'application/pdf' });
const formData = new FormData();
formData.append('pdfFile', pdfBlob, 'document.pdf'); // 第三个参数是文件名

// 使用fetch发送请求
fetch('/api/upload-pdf', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.catch(err => console.error('上传失败:', err));

// 或使用axios
axios.post('/api/upload-pdf', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

可选方案2：直接发送Blob（仅传PDF时更简洁） #

无需封装，直接将Blob作为请求体发送：

const pdfBlob = new Blob([pdfArrayBuffer], { type: 'application/pdf' });

fetch('/api/upload-pdf', {
  method: 'POST',
  body: pdfBlob,
  headers: { 'Content-Type': 'application/pdf' }
});

C# 服务端接收类型与实现 #

对应FormData提交的场景 #

使用IFormFile接收上传的文件：

[HttpPost("upload-pdf")]
public IActionResult UploadPdf(IFormFile pdfFile)
{
    if (pdfFile == null || pdfFile.Length == 0)
    {
        return BadRequest("未上传有效文件");
    }

    // 读取文件内容为byte数组
    using (var memoryStream = new MemoryStream())
    {
        pdfFile.CopyTo(memoryStream);
        byte[] pdfBytes = memoryStream.ToArray();
        // 后续处理：写入本地、存储到数据库等
    }

    return Ok("文件上传成功");
}

对应直接发送Blob的场景 #

可直接接收为byte[]或通过Request.Body读取Stream：

方式1：接收为byte[]

[HttpPost("upload-pdf")]
public IActionResult UploadPdf([FromBody] byte[] pdfBytes)
{
    if (pdfBytes == null || pdfBytes.Length == 0)
    {
        return BadRequest("文件数据为空");
    }

    // 处理pdfBytes逻辑
    return Ok("文件上传成功");
}

方式2：通过Stream读取

[HttpPost("upload-pdf")]
public async Task<IActionResult> UploadPdf()
{
    using (var memoryStream = new MemoryStream())
    {
        await Request.Body.CopyToAsync(memoryStream);
        byte[] pdfBytes = memoryStream.ToArray();
        // 处理逻辑
    }

    return Ok("文件上传成功");
}

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