ASP.NET Razor Pages表单集成Dropzone上传文件报404错误如何解决

你配置的Dropzone上传路径url: '/uploads/image'指向的是wwwroot下的静态资源目录，ASP.NET Core默认不会为静态目录处理POST请求，也没有对应的后端接口接收Dropzone上传的文件，因此返回404错误。
原生文件输入框可以正常获取文件，是因为它和表单绑定，提交时会将文件数据发送到Razor Pages默认的OnPost处理方法，而Dropzone默认会独立发起上传请求，没有和现有表单逻辑绑定。

1. 调整Dropzone配置 #

首先将你的Dropzone容器放到现有<form>标签内部，然后修改JS配置如下：

// 先关闭自动发现，避免重复初始化
Dropzone.autoDiscover = false;

const myDropzone = new Dropzone("#myDropzone", {
    autoProcessQueue: false, // 关闭拖拽后自动上传，等表单提交时统一处理
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    paramName: "Files", // 和后端绑定的属性名保持一致
    init: function () {
        // 替换为你实际的表单ID
        const targetForm = document.getElementById('yourFormId');
        // 监听表单提交事件
        targetForm.addEventListener('submit', (e) => {
            e.preventDefault();
            // 有文件待上传时先处理文件队列
            if (this.getQueuedFiles().length > 0) {
                this.processQueue();
            } else {
                // 无文件直接提交表单
                targetForm.submit();
            }
        });

        // 发送请求前将表单其他字段附加到上传数据中
        this.on("sendingmultiple", function (file, xhr, formData) {
            new FormData(targetForm).forEach((value, key) => {
                formData.append(key, value);
            });
            // 附加Razor Pages防伪令牌，避免400错误
            formData.append("__RequestVerificationToken", document.querySelector('input[name="__RequestVerificationToken"]').value);
        });

        // 上传成功后执行后续逻辑
        this.on("successmultiple", function (files, response) {
            // 可替换为你的业务逻辑，比如跳转、提示
            window.location.reload();
        });
    }
});

2. 调整后端PageModel代码 #

在你对应页面的.cshtml.cs文件中添加文件绑定属性，示例如下：

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

public class YourPageModel : PageModel
{
    private readonly IWebHostEnvironment _webHostEnvironment;

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

    // 绑定上传的文件，属性名和Dropzone的paramName一致
    [BindProperty]
    public List<IFormFile> Files { get; set; }

    // 你的其他表单绑定属性写在这里

    public async Task<IActionResult> OnPostAsync()
    {
        // 处理上传的文件
        if (Files != null && Files.Any())
        {
            var uploadDir = Path.Combine(_webHostEnvironment.WebRootPath, "uploads");
            // 不存在目录自动创建
            if (!Directory.Exists(uploadDir))
            {
                Directory.CreateDirectory(uploadDir);
            }
            foreach (var file in Files)
            {
                if (file.Length > 0)
                {
                    var savePath = Path.Combine(uploadDir, file.FileName);
                    using var stream = new FileStream(savePath, FileMode.Create);
                    await file.CopyToAsync(stream);
                }
            }
        }

        // 你的其他业务逻辑处理

        return Page();
    }
}

如果你需要拖拽完成就自动上传，不需要等表单提交，可以单独创建一个Razor Page处理上传请求：

1. 在项目中新建Pages/Uploads/Image.cshtml，对应的后台文件Image.cshtml.cs写入和上文一致的上传处理逻辑
2. 将Dropzone配置的url改为/Uploads/Image，打开autoProcessQueue: true即可，不会再报404。

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