基于ASP.NET Boilerplate框架，如何用DTO实现文件上传功能？

我刚好在ABP项目里实现过类似的功能，给你一步步拆解下怎么从DTO层面搞定文件/图片上传，包括AppService和前端JS的实现：

ABP的AppService会自动映射成API接口，所以我们完全不需要手动写控制器——核心就是定义能承载文件的DTO，在AppService里实现上传逻辑，前端用FormData提交请求即可，完美贴合你想用DTO而非直接操作控制器的需求。

1. 定义上传相关的DTO #

首先创建输入DTO，要包含IFormFile类型的字段（ABP会自动处理这个类型的请求绑定），还可以按需添加额外业务参数：

public class UploadFileInputDto
{
    [Required]
    public IFormFile File { get; set; }

    // 示例：额外的业务参数，比如图片描述、所属业务ID
    public string Description { get; set; }
    public Guid? BusinessId { get; set; }
}

再定义输出DTO，返回上传后的结果（比如文件ID、访问URL、原文件名）：

public class UploadFileOutputDto
{
    public Guid FileId { get; set; }
    public string FileUrl { get; set; }
    public string OriginalFileName { get; set; }
}

2. 实现AppService的上传方法 #

注入IWebHostEnvironment来获取静态文件目录，然后编写上传逻辑（这里以本地存储为例，换成云存储只需要替换保存部分的代码）：

public class FileAppService : YourProjectAppServiceBase, IFileAppService
{
    private readonly IWebHostEnvironment _webHostEnvironment;

    public FileAppService(IWebHostEnvironment webHostEnvironment)
    {
        _webHostEnvironment = webHostEnvironment;
    }

    [AbpAuthorize(AppPermissions.File_Upload)] // 按需添加权限控制
    public async Task<UploadFileOutputDto> UploadFileAsync(UploadFileInputDto input)
    {
        // 1. 验证文件类型（也可以在DTO上加[FileExtensions]特性）
        var allowedExtensions = new[] { ".jpg", ".png", ".jpeg", ".pdf" };
        var fileExtension = Path.GetExtension(input.File.FileName).ToLower();
        if (!allowedExtensions.Contains(fileExtension))
        {
            throw new UserFriendlyException("仅支持上传jpg/png/pdf格式的文件");
        }

        // 2. 生成唯一文件名，避免覆盖和路径遍历风险
        var uniqueFileName = $"{Guid.NewGuid()}{fileExtension}";
        var uploadDir = Path.Combine(_webHostEnvironment.WebRootPath, "uploads");
        
        // 确保上传目录存在
        if (!Directory.Exists(uploadDir))
        {
            Directory.CreateDirectory(uploadDir);
        }

        // 3. 保存文件到本地
        var filePath = Path.Combine(uploadDir, uniqueFileName);
        await using var stream = new FileStream(filePath, FileMode.Create);
        await input.File.CopyToAsync(stream);

        // 4. 组装返回结果
        var fileUrl = $"/uploads/{uniqueFileName}";
        return new UploadFileOutputDto
        {
            FileId = Guid.NewGuid(),
            FileUrl = fileUrl,
            OriginalFileName = input.File.FileName
        };
    }
}

因为要上传文件，必须用FormData对象（不能用普通JSON请求），这里提供两种常用实现方式：

1. 用ABP自带的abp.ajax（推荐，和框架集成更顺畅） #

先写一个简单的上传表单：

<input type="file" id="fileUploader" accept=".jpg,.png,.pdf">
<button onclick="handleUpload()">上传文件</button>

然后编写JS逻辑：

function handleUpload() {
    const fileInput = document.getElementById('fileUploader');
    const selectedFile = fileInput.files[0];
    
    if (!selectedFile) {
        abp.message.error('请先选择要上传的文件');
        return;
    }

    // 创建FormData并添加文件和业务参数
    const formData = new FormData();
    formData.append('File', selectedFile);
    formData.append('Description', '用户头像'); // 对应DTO里的额外参数
    formData.append('BusinessId', 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

    // 调用ABP自动生成的API接口（路径规则：/api/app/[AppService名称去掉后缀]/[方法名]）
    abp.ajax({
        url: '/api/app/file/upload-file',
        type: 'POST',
        processData: false, // 必须设为false，否则FormData会被转成字符串
        contentType: false, // 必须设为false，让浏览器自动设置multipart/form-data
        data: formData
    }).then(response => {
        abp.message.success('文件上传成功');
        // 示例：显示上传后的图片
        const img = document.createElement('img');
        img.src = response.fileUrl;
        img.style.width = '200px';
        document.body.appendChild(img);
    }).catch(error => {
        abp.message.error(error.message || '上传失败，请稍后重试');
    });
}

2. 用Axios实现（如果项目用Axios作为请求库） #

async function handleUpload() {
    const fileInput = document.getElementById('fileUploader');
    const selectedFile = fileInput.files[0];
    
    if (!selectedFile) {
        abp.message.error('请先选择要上传的文件');
        return;
    }

    const formData = new FormData();
    formData.append('File', selectedFile);
    formData.append('Description', '文档附件');

    try {
        const response = await axios.post('/api/app/file/upload-file', formData, {
            headers: {
                'Authorization': `Bearer ${abp.auth.getToken()}`, // 带上ABP的认证Token
                'Content-Type': 'multipart/form-data'
            }
        });
        abp.message.success('上传成功');
        console.log('文件访问URL:', response.data.fileUrl);
    } catch (error) {
        abp.message.error(error.response?.data?.error?.message || '上传失败');
    }
}

• 文件大小限制：在appsettings.json配置ABP的最大请求大小，同时在Program.cs配置ASP.NET Core的请求限制：

  "Abp": {
    "Web": {
      "MaxRequestSize": 10485760 // 10MB，单位为字节
    }
  }
  

  // Program.cs中添加
  builder.Services.Configure<FormOptions>(options =>
  {
      options.MultipartBodyLengthLimit = 10 * 1024 * 1024; // 10MB
  });
  

• 文件安全：不要直接使用用户上传的文件名，一定要生成唯一文件名；最好同时验证文件头（比如图片的文件头标识），避免恶意文件伪装成合法格式。
• 权限控制：记得给AppService的上传方法添加[AbpAuthorize]特性，或者更细粒度的自定义权限。

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