ASP.NET MVC中DropZone上传带子目录结构的文件问题求助

要实现拖拽文件夹并保留原层级结构上传，核心是获取文件在原文件夹中的相对路径，然后在服务器端重建该结构。以下是具体实现步骤：

1. 前端DropZone配置 #

首先需要开启DropZone的文件夹上传支持，并在上传时传递文件的相对路径到后端：

Dropzone.options.myDropzone = {
  url: '/YourController/Upload', // 替换为你的控制器上传方法路径
  uploadMultiple: true,
  paramName: "file",
  createImageThumbnails: false,
  folderUpload: true, // 启用文件夹上传
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      // 传递文件的相对路径（兼容不同浏览器）
      const relativePath = file.webkitRelativePath || file.relativePath;
      formData.append(`${file.name}_relativePath`, relativePath);
    });
  }
};

2. 后端上传方法修改 #

修改你的Upload方法，获取前端传递的相对路径，重建文件夹结构并保存文件：

public void Upload()
{
    bool isSavedSuccessfully = true;
    string rootUploadDir = Server.MapPath("~/_UploadedFile");

    try
    {
        foreach (string fileKey in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[fileKey];
            if (file == null || file.ContentLength <= 0)
                continue;

            try
            {
                // 获取前端传递的相对路径
                string relativePathParam = $"{file.FileName}_relativePath";
                string relativePath = Request.Form[relativePathParam] ?? file.FileName;

                // 分离相对路径中的文件夹和文件名
                string subFolderPath = Path.GetDirectoryName(relativePath);
                string originalFileName = Path.GetFileName(file.FileName);
                string fileExt = Path.GetExtension(originalFileName);
                string newFileName = Guid.NewGuid().ToString() + fileExt;

                // 构建服务器端目标文件夹路径并创建
                string targetFolder = Path.Combine(rootUploadDir, subFolderPath);
                if (!Directory.Exists(targetFolder))
                {
                    Directory.CreateDirectory(targetFolder);
                }

                // 保存文件到目标路径
                string fullSavePath = Path.Combine(targetFolder, newFileName);
                file.SaveAs(fullSavePath);

                // 可选：将相对路径、新文件名等信息存入数据库
                // Example: DbContext.UploadedFiles.Add(new UploadedFile { OriginalPath = relativePath, ServerFileName = newFileName });
                // DbContext.SaveChanges();
            }
            catch (Exception ex)
            {
                // 记录单个文件上传异常（建议添加日志）
                isSavedSuccessfully = false;
            }
        }
    }
    catch (Exception ex)
    {
        isSavedSuccessfully = false;
    }

    // 可选：返回上传结果
    // Response.ContentType = "application/json";
    // Response.Write(JsonConvert.SerializeObject(new { Success = isSavedSuccessfully }));
}

关键说明 #

• 相对路径获取：浏览器通过webkitRelativePath（Chrome/Edge）或relativePath（Firefox）提供文件在原文件夹中的层级路径，前端需要将这个值传递给后端。
• 文件夹重建：通过Path.GetDirectoryName(relativePath)提取子文件夹路径，在服务器端创建对应目录后再保存文件。
• 文件名处理：用Guid生成新文件名避免冲突，同时可以保留原相对路径到数据库，方便后续索引和还原结构。

注意事项 #

• 非法字符处理：如果原文件夹或文件名包含系统不允许的字符，需要提前过滤，例如使用Path.GetInvalidFileNameChars()检查并替换。
• 上传大小限制：若上传大文件，需要修改web.config配置：

<system.web>
  <httpRuntime maxRequestLength="1048576" /> <!-- 单位：KB，此处为1GB -->
</system.web>
<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="1073741824" /> <!-- 单位：字节，此处为1GB -->
    </requestFiltering>
  </security>
</system.webServer>

• 权限设置：确保服务器上的_UploadedFile目录有写入权限。

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