前端JavaScript向C#接口传值时数组为空及415错误求助

前端通过Axios发送包含二进制文件数组和MaterialId的请求到C#接口时，出现两个问题：

• Console中可见二进制数组不为空，但C#接口接收的Image数组始终为空，MaterialId能正常获取。
• 添加Content-Type: application/octet-stream请求头后，出现415 Unsupported Media Type错误，尽管请求中确实包含数组数据。

相关代码片段 #

C# 模型定义 #

public class axiosChangeMaterialPictureModel
{
    public Array[] Image { get; set; }

    public int MaterialId { get; set; }
}

C# 接口端点 #

[HttpPost]
public IActionResult ChangeMaterialPicture([FromBody] axiosChangeMaterialPictureModel data)
{
    string defaultPath = _webHostEnvironment.WebRootPath;

    string oldPicture = _warehouseService.ChangeMaterialPicture(data.Image, data.MaterialId, defaultPath);

    if (!string.IsNullOrEmpty(oldPicture))
    {
        // 删除旧图片
        _convertService.DeleteMaterialFile(oldPicture);

        return Ok();
    }
    else
    {
        return BadRequest();
    }
}

前端JavaScript代码 #

let arrBinaryFile = [];
let file = document.getElementById(`file-${materialId}`).files[0];
let reader = new FileReader();

// 读取文件为数组
reader.readAsArrayBuffer(file);
reader.onloadend = function (evt) {
    if (evt.target.readyState == FileReader.DONE) {
        var arrayBuffer = evt.target.result,
            array = new Uint8Array(arrayBuffer);
        for (var i = 0; i < array.length; i++) {
            arrBinaryFile.push(array[i]);
        }
    }
}
console.log(arrBinaryFile);
let baseUrl = `${baseSharedUrl}/Warehouse/ChangeMaterialPicture`;

var data = {
    Image : arrBinaryFile,
    MaterialId: materialId
}
axios.post(baseUrl, data)
    .then(function (response) {
    })
    .catch(function (error) {
    })

更新尝试（触发415错误） #

尝试添加以下请求头配置后出现415错误：

let config = {
    headers: {
        "Content-Type": "application/octet-stream",
    }
}

解决办法 #

1. 修正C#模型的类型定义 #

当前模型中Image字段用Array[]（数组的数组）是错误的，前端发送的是单个文件的Uint8数字数组，后端应使用byte[]（对应二进制字节数组）来接收：

public class axiosChangeMaterialPictureModel
{
    public byte[] Image { get; set; } // 替换Array[]为byte[]
    public int MaterialId { get; set; }
}

2. 修复前端异步逻辑与请求格式 #

现有代码存在异步顺序问题：在FileReader完成文件读取前就发送了请求，导致arrBinaryFile为空。同时无需修改Content-Type——Axios默认的application/json即可将数字数组正确序列化为JSON，后端能自动映射为byte[]：

let file = document.getElementById(`file-${materialId}`).files[0];
let reader = new FileReader();

reader.readAsArrayBuffer(file);
reader.onloadend = function (evt) {
    if (evt.target.readyState == FileReader.DONE) {
        var arrayBuffer = evt.target.result;
        // 直接将ArrayBuffer转为数字数组，简化代码
        let arrBinaryFile = Array.from(new Uint8Array(arrayBuffer));
        
        let baseUrl = `${baseSharedUrl}/Warehouse/ChangeMaterialPicture`;
        var data = {
            Image : arrBinaryFile,
            MaterialId: materialId
        };

        // 使用默认Content-Type: application/json发送请求
        axios.post(baseUrl, data)
            .then(function (response) {
                console.log("上传成功");
            })
            .catch(function (error) {
                console.error("上传失败", error);
            });
    }
}

3. 多文件上传扩展方案 #

如果后续需要支持多文件上传，可调整模型为List<byte[]>，前端对应传递数组的数组：

public class axiosChangeMaterialPictureModel
{
    public List<byte[]> Images { get; set; } // 多文件用List<byte[]>接收
    public int MaterialId { get; set; }
}

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