如何通过Angular Kendo Upload将证书文件上传至.NET MVC API并转为byte[]

核心思路 #

无需手动依赖FileReader读取文件，Kendo Upload原生支持FormData提交，后端直接接收文件并转换为byte[]更可靠；若必须前端处理字节数组，可修正FileReader逻辑实现。

方案一：直接用Kendo Upload提交FormData（推荐） #

1. HTML配置（Kendo Upload） #

<kendo-upload
    #certUpload
    [saveUrl]="apiUrl + '/UploadCertificate'"
    [removeUrl]="apiUrl + '/RemoveCertificate'"
    [autoUpload]="false"
    (select)="onFileSelect($event)"
    (upload)="onUpload($event)">
</kendo-upload>
<button (click)="certUpload.upload()">上传证书</button>

2. TS组件逻辑 #

import { Component } from '@angular/core';
import { UploadEvent, FileInfo } from '@progress/kendo-angular-upload';

@Component({
  selector: 'app-cert-upload',
  templateUrl: './cert-upload.component.html'
})
export class CertUploadComponent {
  apiUrl = '/api/Certificate';
  selectedFile: FileInfo | null = null;

  onFileSelect(e: UploadEvent) {
    this.selectedFile = e.files[0];
  }

  onUpload(e: UploadEvent) {
    // 向FormData添加额外参数
    e.formData.append('CertificateName', this.selectedFile?.name || '');
  }
}

3. .NET MVC Controller接收并转换为byte[] #

[HttpPost]
public async Task<IActionResult> UploadCertificate(IFormFile file, string certificateName)
{
    if (file == null || file.Length == 0)
        return BadRequest("未选择有效文件");

    using var ms = new MemoryStream();
    await file.CopyToAsync(ms);
    byte[] certBytes = ms.ToArray();

    // 写入数据库逻辑示例
    // _dbContext.Certificates.Add(new Certificate { Data = certBytes, Name = certificateName });
    // await _dbContext.SaveChangesAsync();

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

方案二：前端用FileReader读取为字节数组后提交 #

TS组件读取文件逻辑 #

onFileSelect(e: UploadEvent) {
  const file = e.files[0].rawFile;
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    // 将ArrayBuffer转换为Uint8Array，再转为普通数组供后端解析
    const arrayBuffer = e.target?.result as ArrayBuffer;
    const byteArray = Array.from(new Uint8Array(arrayBuffer));
    
    // 调用服务提交数据
    this.certService.uploadCertificate(byteArray, file.name).subscribe(res => {
      console.log("上传成功", res);
    });
  };
  reader.readAsArrayBuffer(file); // 必须使用readAsArrayBuffer方法
}

TS服务提交逻辑 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class CertService {
  constructor(private http: HttpClient) {}

  uploadCertificate(byteArray: number[], fileName: string) {
    const body = {
      CertificateData: byteArray,
      FileName: fileName
    };
    return this.http.post('/api/Certificate/UploadBytes', body);
  }
}

.NET MVC Controller接收 #

public class CertificateVm
{
    public int[] CertificateData { get; set; }
    public string FileName { get; set; }
}

[HttpPost("UploadBytes")]
public IActionResult UploadBytes([FromBody] CertificateVm vm)
{
    if (vm.CertificateData == null || vm.CertificateData.Length == 0)
        return BadRequest("无效的证书数据");

    // 将int数组转换为byte[]
    byte[] certBytes = vm.CertificateData.Select(x => (byte)x).ToArray();

    // 写入数据库逻辑...

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

常见问题排查 #

• 确保Kendo Upload能获取到rawFile原生文件对象，部分场景需配置[withCredentials]="false"或检查跨域设置
• FileReader必须在onload回调内处理结果，不可同步读取
• 用IFormFile接收时，请求Content-Type需为multipart/form-data，Kendo Upload默认会自动设置
• 前端传递字节数组时，确保每个元素值在0-255范围内，避免数值溢出

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