如何在SyncFusion SfUploader上传时附带自定义元数据（.NET6 Blazor WASM）

你当前的问题是客户端设置的自定义元数据没被服务端接收到，核心原因有两个：一是FileSelected事件时机过早，二是直接传入DTO对象无法被表单正确解析。下面是可行的解决步骤：

客户端代码修改 #

1. 把FileSelected事件替换为BeforeUpload事件——这个时机是在上传请求即将发起前触发，能确保自定义数据被正确加入上传表单
2. 将自定义元数据拆分为键值对形式添加到CustomFormData，避免直接传入DTO对象导致解析失败

修改后的客户端代码：

@page "/"

<SfUploader ID="UploadFiles">
    <UploaderEvents BeforeUpload="onBeforeUpload"></UploaderEvents>
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save"></UploaderAsyncSettings>
</SfUploader>

@code {
    private void onBeforeUpload(BeforeUploadEventArgs args)
    {
        var docMetadata = new DocumentDTO 
        { 
            Id = Guid.NewGuid(), 
            Description = "A really cool document", 
            Type = "WebUpload" 
        };
        
        // 以键值对形式添加元数据，服务端可直接通过表单键名读取
        args.CustomFormData = new List<KeyValuePair<string, object>>
        {
            new("Id", docMetadata.Id),
            new("Description", docMetadata.Description),
            new("Type", docMetadata.Type)
        };
    }

    public class DocumentDTO
    {
        public Guid Id { get; set; }
        public string Type { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }
}

服务端代码修改 #

有两种简洁的方式获取自定义元数据，选其一即可：

方式1：直接从Request.Form读取 #

[ApiController]
[Route("api/[controller]")]
public class SampleDataController : ControllerBase
{
    [HttpPost("[action]")]
    public async Task Save(IList<IFormFile> UploadFiles)
    {
        // 从表单中直接读取自定义元数据
        var docId = Guid.Parse(Request.Form["Id"]);
        var docType = Request.Form["Type"];
        var docDesc = Request.Form["Description"];

        Console.WriteLine($"文档ID: {docId}, 类型: {docType}, 描述: {docDesc}");

        foreach (var file in UploadFiles)
        {
            var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
            filename = Path.Combine(Environment.CurrentDirectory, filename);
            // 这里添加文件保存逻辑
        }
    }
}

方式2：用DTO自动绑定（更优雅） #

先在服务端定义和客户端一致的DTO：

public class DocumentDTO
{
    public Guid Id { get; set; }
    public string Type { get; set; } = string.Empty;
    public string Description { get; set; } = string.Empty;
}

然后修改Action参数，让模型绑定自动解析元数据：

[ApiController]
[Route("api/[controller]")]
public class SampleDataController : ControllerBase
{
    [HttpPost("[action]")]
    public async Task Save(IList<IFormFile> UploadFiles, DocumentDTO docMetadata)
    {
        Console.WriteLine($"文档ID: {docMetadata.Id}, 类型: {docMetadata.Type}, 描述: {docMetadata.Description}");

        foreach (var file in UploadFiles)
        {
            var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
            filename = Path.Combine(Environment.CurrentDirectory, filename);
            // 这里添加文件保存逻辑
        }
    }
}

额外注意点 #

• 把服务端的async void改成async Task——async void仅适用于UI事件处理，API接口返回Task能避免异步操作的潜在问题
• 不要用修改文件名的临时方案，表单传递元数据是标准且可维护的方式

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