如何在Dotnet中实现图片上传？裁剪正常保存失效如何修复

• 前端提交参数不匹配：绝大多数Cropper裁剪后保存失效的问题都出在这一步，你后端接收的参数是List<IFormFile> postedFiles，但Cropper默认不会输出标准表单文件对象：要么前端提交的是base64格式的图片字符串，不能被IFormFile解析；要么FormData里的字段名不是postedFiles，后端收不到上传内容，循环逻辑不执行自然不会保存文件。
• 依赖接口过时：IHostingEnvironment在.NET Core 3.0及以上版本已经被官方标记为废弃，高版本.NET环境下可能无法正确获取WebRootPath路径，导致路径拼接错误，文件写入到未知目录。
• 大小/权限限制：ASP.NET Core默认表单上传大小限制为30MB，超过限制的文件会被直接拦截；同时如果wwwroot/Uploads目录没有给应用运行身份授予写入权限，文件流创建时会抛出异常，你的代码没有异常捕获逻辑，会直接跳过写入步骤。

1. 调整前端提交逻辑（关键） #

Cropper裁剪后需要将内容转成Blob对象存入FormData提交，且字段名必须和后端接收参数名一致，示例前端代码：

// 从Cropper实例获取裁剪后的画布
cropper.getCroppedCanvas().toBlob(function (blob) {
  const formData = new FormData();
  // 第一个参数必须和后端参数名一致：postedFiles
  formData.append('postedFiles', blob, '裁剪后的文件名.png');
  // 提交请求
  fetch('/Cropper/Index', {
    method: 'POST',
    body: formData
  }).then(res => res.text()).then(data => console.log('提交结果',data));
}, 'image/png');

如果你的前端逻辑是直接提交base64格式的图片，需要单独写接收接口，不能用IFormFile接收，示例后端处理逻辑：

[HttpPost]
public IActionResult SaveCropped([FromForm] string base64Image)
{
    // 移除base64前缀
    var pureBase64 = System.Text.RegularExpressions.Regex.Replace(base64Image, @"^data:image\/[a-zA-Z]+;base64,", string.Empty);
    byte[] imgBytes = Convert.FromBase64String(pureBase64);
    // 生成不重复文件名避免覆盖
    string fileName = $"cropped_{Guid.NewGuid():N}.png";
    string savePath = Path.Combine(_webHostEnvironment.WebRootPath, "Uploads", fileName);
    System.IO.File.WriteAllBytes(savePath, imgBytes);
    ViewBag.Message = $"<b>{fileName}</b> 上传成功<br />";
    return View("Index");
}

2. 调整Controller代码 #

替换过时依赖，增加参数校验、大小限制、文件名去重逻辑：

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.IO;

public class CropperController : BaseController
{
    // 替换为官方推荐的IWebHostEnvironment
    private readonly IWebHostEnvironment _webHostEnvironment;

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

    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    // 按需调整上传大小限制，示例为50MB
    [RequestFormLimits(MultipartBodyLengthLimit = 52428800)]
    public IActionResult Index(List<IFormFile> postedFiles)
    {
        // 增加空参数校验，方便排查问题
        if(postedFiles == null || postedFiles.Count == 0)
        {
            ViewBag.Message = "未接收到上传文件，请检查前端提交逻辑";
            return View();
        }
        string uploadDir = Path.Combine(_webHostEnvironment.WebRootPath, "Uploads");
        if (!Directory.Exists(uploadDir))
        {
            Directory.CreateDirectory(uploadDir);
        }

        List<string> uploadedFiles = new List<string>();
        foreach (IFormFile postedFile in postedFiles)
        {
            // 增加随机后缀避免同名文件覆盖
            string fileName = $"{Path.GetFileNameWithoutExtension(postedFile.FileName)}_{Guid.NewGuid():N}{Path.GetExtension(postedFile.FileName)}";
            string fullPath = Path.Combine(uploadDir, fileName);
            using (FileStream stream = new FileStream(fullPath, FileMode.Create))
            {
                postedFile.CopyTo(stream);
                uploadedFiles.Add(fileName);
                ViewBag.Message += $"<b>{fileName}</b> 上传成功<br />";
            }
        }
        return View();
    }
}

3. 权限配置 #

• IIS部署：给wwwroot/Uploads目录添加IIS_IUSRS组或者对应应用程序池用户的读取、写入权限
• Linux部署：给运行dotnet进程的用户授予Uploads目录755及以上权限

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