MVC中实现多文件拖拽上传及寻找替代上传工具咨询

一、先解决你用Uppy时的属性关联问题 #

你当前的Uppy配置用了第三方Tus服务，没法和项目的ImageUrl属性联动，也没结合现有表单。调整方案如下：

1. 替换Tus插件为Form插件，让上传动作绑定到你的ASP.NET表单
2. 给文件输入框添加multiple属性，开启多文件支持
3. 通过Uppy的complete事件收集文件路径，存入隐藏字段供后端接收

调整后的代码示例：

<form method="post" asp-action="create" id="form2" enctype="multipart/form-data">
    <div class="form-group">
        <label asp-for="ImageUrl">@localizer.GetLocalizedHtmlString("ImageUrl")</label>
        <div id="drag-drop-area"></div>
        <!-- 隐藏字段存储多文件路径，后端对应接收 -->
        <input type="hidden" id="hiddenImageUrls" name="ImageUrls" />
        <!-- 隐藏原生文件输入，用Uppy面板替代 -->
        <input asp-for="ImageUrl" type="file" name="files" class="form-control" id="ImageUrl" multiple style="display:none;"/>

        <script type="module">
            import { Uppy, Dashboard, Form } from "https://releases.transloadit.com/uppy/v3.0.1/uppy.min.mjs"
            var uppy = new Uppy()
                .use(Dashboard, {
                    inline: true,
                    target: '#drag-drop-area',
                    allowMultipleUploads: true
                })
                .use(Form, {
                    target: '#form2',
                    addResultToForm: true,
                    resultName: 'files' // 和input的name属性对应
                })

            uppy.on('complete', (result) => {
                // 收集成功上传的文件路径，存入隐藏字段
                const urls = result.successful.map(file => file.response.uploadURL).join(',');
                document.getElementById('hiddenImageUrls').value = urls;
                // 如需自动提交表单，取消下面注释
                // document.getElementById('form2').submit();
            })
        </script>
    </div>
</form>

后端需修改接收逻辑，用IFormFile[] files接收多文件，循环保存到项目文件夹后，将路径绑定到模型属性。

二、其他适合的多文件拖拽上传工具 #

1. Dropzone.js #

轻量级无依赖，原生支持拖拽上传，极易和ASP.NET表单集成：

• 自带多文件上传、预览、进度显示功能
• 可直接对接你的ASP.NET Action，上传文件自动提交
• 配置简单，仅需引入JS和CSS，指定拖拽区域即可

核心代码示例：

<div class="form-group">
    <label asp-for="ImageUrl">@localizer.GetLocalizedHtmlString("ImageUrl")</label>
    <div id="my-dropzone" class="dropzone"></div>
</div>

<script src="dropzone.min.js"></script>
<link rel="stylesheet" href="dropzone.min.css">
<script>
    Dropzone.options.myDropzone = {
        url: '/Controller/Create', // 你的ASP.NET Action地址
        method: 'post',
        paramName: 'files', // 后端接收参数名
        maxFiles: 10, // 最大上传数量
        acceptedFiles: 'image/*', // 限制仅上传图片
        init: function() {
            this.on("success", function(file, response) {
                // 上传成功后，将文件路径追加到隐藏字段
                const hiddenInput = document.getElementById('hiddenImageUrls');
                hiddenInput.value += (hiddenInput.value ? ',' : '') + response.filePath;
            });
        }
    };
</script>

2. Fine Uploader #

功能全面，支持拖拽、多文件、断点续传，适配复杂场景：

• 支持表单、XHR、云存储等多种上传方式
• 自带文件验证、预览、错误处理机制
• 可无缝对接ASP.NET后端，自定义文件保存逻辑

3. jQuery File Upload #

基于jQuery的老牌上传插件，文档完善、社区支持度高：

• 支持拖拽上传、多文件批量上传、进度条展示
• 可快速集成到现有ASP.NET表单中
• 自定义性强，能满足各类上传需求

三、通用注意事项 #

1. 表单必须保留enctype="multipart/form-data"属性
2. 后端Action接收多文件示例：

[HttpPost]
public IActionResult Create(List<IFormFile> files, YourModel model)
{
    var wwwrootPath = _webHostEnvironment.WebRootPath;
    foreach (var file in files)
    {
        if (file.Length > 0)
        {
            var filePath = Path.Combine(wwwrootPath, "images", Guid.NewGuid() + Path.GetExtension(file.FileName));
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                file.CopyTo(stream);
            }
            // 将文件相对路径添加到模型集合属性
            model.ImageUrls.Add("/images/" + Path.GetFileName(filePath));
        }
    }
    // 执行模型保存等后续逻辑
    return RedirectToAction("Index");
}

3. 确保项目的目标文件夹（如wwwroot/images）具备写入权限

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