CKEditor5结合Angular12与.NET6 Web API使用simple upload插件上传图片问题

核心错误点 #

现有代码存在几个典型问题导致无法正常接收CKEditor5上传的图片：

• CKEditor5默认上传图片的表单字段名为upload，接口Action参数命名为photo，模型绑定无法匹配导致拿不到文件
• 同时读取Request.Body和Request.Form会引发流读取冲突
• 存储路径硬编码且没有关联网站根目录，生成的访问地址前端无法正常加载
• 返回值格式不符合CKEditor5的要求，上传成功后组件无法识别返回的图片地址

修复步骤 #

1. 修正后端API接口代码 #

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
    private readonly IWebHostEnvironment _webHostEnv;

    // 注入IWebHostEnvironment获取网站根目录
    public UploadController(IWebHostEnvironment webHostEnv)
    {
        _webHostEnv = webHostEnv;
    }

    [HttpPost("AddPostPhoto")]
    public async Task<IActionResult> AddPostPhoto(IFormFile upload)
    {
        try
        {
            // 校验是否接收到文件
            if (upload == null || upload.Length == 0)
                return BadRequest("未接收到上传的图片");

            // 初始化存储目录
            var uploadDir = Path.Combine(_webHostEnv.WebRootPath, "Photos", "PostPhotos");
            if (!Directory.Exists(uploadDir))
                Directory.CreateDirectory(uploadDir);

            // 生成不重复的文件名避免覆盖
            var fileExt = Path.GetExtension(upload.FileName);
            var fileName = $"{Guid.NewGuid():N}{fileExt}";
            var savePath = Path.Combine(uploadDir, fileName);

            // 保存文件
            await using var stream = new FileStream(savePath, FileMode.Create, FileAccess.Write);
            await upload.CopyToAsync(stream);

            // 返回CKEditor可识别的访问地址，需确保你已配置静态文件中间件可访问Photos目录
            var accessUrl = $"/Photos/PostPhotos/{fileName}";
            return Ok(new { url = accessUrl });
        }
        catch (Exception exception)
        {
            return BadRequest(new { error = new { message = exception.Message } });
        }
    }
}

2. 补充必要配置 #

• 确保你在Program.cs中已开启静态文件访问，否则前端无法加载上传后的图片：

// 需放在路由配置之前
app.UseStaticFiles();

• 如果前端和API端口不同，务必配置CORS策略允许前端域名访问，避免跨域拦截上传请求
• 如果你的API开启了身份认证，需要在CKEditor的上传配置中携带认证Token，或者给上传接口添加[AllowAnonymous]特性

3. 校验前端CKEditor配置 #

确认Angular项目中CKEditor的上传地址配置正确，示例配置参考：

export class EditorComponent {
  public editorConfig = {
    simpleUpload: {
      uploadUrl: '你的API接口完整地址/api/Upload/AddPostPhoto',
      // 如需身份认证补充请求头
      headers: {
        'Authorization': 'Bearer ' + 登录后获取的访问令牌
      }
    }
  };
}

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