如何在无submit按钮下使用DropZone并在.NET Core中拦截文件

一、前端DropZone配置（无Submit按钮） #

核心是禁用DropZone默认的自动提交行为，改为手动触发上传，无需依赖<input type="submit">按钮。

HTML示例

<div id="file-dropzone" class="dropzone"></div>
<!-- 可选：自定义触发上传的按钮，也可以完全自动上传 -->
<button id="trigger-upload">开始上传</button>

TypeScript + DropZone代码

$(document).ready(() => {
    // 初始化DropZone实例
    const dropzoneInstance = new DropZone("#file-dropzone", {
        url: "/File/UploadFiles", // 对应后端接口路由
        autoProcessQueue: false, // 禁用默认自动提交，关键配置
        paramName: "uploadedFiles", // 后端接收文件的参数名，必须一致
        maxFilesize: 10, // 限制单文件大小（MB）
        acceptedFiles: ".jpg,.png,.docx,.pdf", // 允许的文件类型
        addRemoveLinks: true // 显示文件移除链接
    });

    // 场景1：点击自定义按钮触发上传
    $("#trigger-upload").click(() => {
        if (dropzoneInstance.getQueuedFiles().length > 0) {
            dropzoneInstance.processQueue(); // 手动处理文件队列
        }
    });

    // 场景2：文件添加到队列后自动上传（无需按钮）
    dropzoneInstance.on("addedfile", () => {
        dropzoneInstance.processQueue();
    });

    // 上传状态回调（可选）
    dropzoneInstance.on("success", (file, response) => {
        console.log(`文件 ${file.name} 上传成功`, response);
    });

    dropzoneInstance.on("error", (file, errMsg) => {
        console.error(`文件 ${file.name} 上传失败`, errMsg);
    });
});

二、.NET Core后端接收文件 #

通过IFormFile或List<IFormFile>接收上传的文件，确保路由和请求方法与前端配置匹配。

控制器代码示例

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using System.IO;

namespace YourProject.Controllers
{
    public class FileController : Controller
    {
        // 路由与前端DropZone的url配置一致
        [HttpPost]
        public IActionResult UploadFiles(List<IFormFile> uploadedFiles)
        {
            // 校验上传文件
            if (uploadedFiles == null || uploadedFiles.Count == 0)
            {
                return BadRequest("未检测到上传文件");
            }

            // 定义文件保存路径（示例：wwwroot下的uploads文件夹）
            var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
            if (!Directory.Exists(savePath))
            {
                Directory.CreateDirectory(savePath);
            }

            // 遍历保存文件
            foreach (var file in uploadedFiles)
            {
                if (file.Length > 0)
                {
                    // 避免文件名重复，可添加时间戳或随机字符串
                    var fileName = $"{Guid.NewGuid()}_{file.FileName}";
                    var fullPath = Path.Combine(savePath, fileName);

                    using (var stream = new FileStream(fullPath, FileMode.Create))
                    {
                        file.CopyTo(stream);
                    }
                }
            }

            // 返回上传结果
            return Ok(new { 
                Success = true, 
                Message = $"成功上传 {uploadedFiles.Count} 个文件",
                FileCount = uploadedFiles.Count
            });
        }
    }
}

关键注意事项 #

• 前端paramName必须与后端控制器的参数名完全一致（示例中均为uploadedFiles）。
• 如果需要传递额外参数（如文件描述、分类），可通过DropZone的sending事件附加到表单数据：

  dropzoneInstance.on("sending", (file, xhr, formData) => {
      formData.append("fileCategory", "文档");
      formData.append("description", "用户上传的资料");
  });
  

  后端控制器修改为：

  public IActionResult UploadFiles(List<IFormFile> uploadedFiles, string fileCategory, string description)
  {
      // 处理额外参数...
  }
  

• 若前后端跨域，需在.NET Core启动类中配置CORS策略。

内容的提问来源于stack exchange，提问作者Matías Alejandro Novillo