ASP.NET Core集成TinyMCE上传图片遇HTTP 400错误，求解决方法

问题背景 #

使用ASP.NET Core和TinyMCE搭建Medium克隆项目，配置TinyMCE的图片上传地址为/WriteArticle，对应页面的OnPost方法处理上传请求，但在编辑器中添加图片时收到HTTP 400错误请求。

现有配置与代码 #

TinyMCE初始化配置

automatic_uploads: true,
images_upload_url:'/WriteArticle',
images_upload_path:'/uploads',

WriteArticle页面后台代码（WriteArticle.cshtml.cs）

public IActionResult OnPost()
{
    Console.WriteLine("OnPost");
    try
    {
        var file = Request.Form.Files[0];
        var uploads = Path.Combine(_environment.WebRootPath, "uploads");
        var filePath = Path.Combine(uploads, file.FileName);

        using (var fileStream = new FileStream(filePath, FileMode.Create))
        {
            file.CopyTo(fileStream);
        }
        return new JsonResult(new { location = "/uploads/" + file.FileName });
    }
    catch (Exception ex)
    {
        return BadRequest(new { message = ex.Message });
    }
}

可能的原因及解决方法 #

• CSRF验证失败
  ASP.NET Core Razor Pages默认启用CSRF验证，TinyMCE上传图片时未携带CSRF令牌会触发400错误。解决步骤：

  1. 在WriteArticle.cshtml页面中获取CSRF令牌：

     @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
     @{
         var token = Xsrf.GetAndStoreTokens(HttpContext).RequestToken;
     }
     

  2. 修改TinyMCE配置，添加请求头携带令牌：

     images_upload_headers: {
         'RequestVerificationToken': '@token'
     }
     

• 文件集合索引越界
  代码直接取Request.Form.Files[0]，若没有文件上传会抛出异常返回400。先判断文件是否存在：

  if (Request.Form.Files.Count == 0)
  {
      return BadRequest(new { message = "未上传任何文件" });
  }
  var file = Request.Form.Files[0];
  

• 上传目录权限或存在性问题
  确认uploads目录存在且ASP.NET Core进程有写入权限，可在代码中提前创建目录：

  if (!Directory.Exists(uploads))
  {
      Directory.CreateDirectory(uploads);
  }
  

• 文件名冲突或非法字符
  直接使用原文件名易引发重复或非法字符问题，建议生成唯一文件名：

  var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
  var filePath = Path.Combine(uploads, uniqueFileName);
  

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