dropzone 和 asp.net core 3.1 - 发送到控制器的正确参数是什么？

Question

我在我的剃刀视图中有这个：

<div id="dropzone">
<form action="/Controller/Upload" method="post" enctype="multipart/form-data"
      id="my-awesome-dropzone" class="dropzone needsclick dz-clickable dropzone-previews">
    @Html.AntiForgeryToken()
    <div ></div>
    <div class="dz-message needsclick">
        <button type="button" class="dz-button">Drop files here or click to upload.</button><br />
    </div>
    <span class="note needsclick">

    </span>
</form>

这在我的 js 中：

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFiles: mediaMax,
  maxFilesize: maxSize,
  uploadMultiple: true,
  accept: function (file, done) {
    if (file.name === "justinbieber.jpg") {
        done("Naha, you don't.");
    }
    else { done(); }
},
  init: function () {
    this.on("sending", function (file, response, formData) {
        formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken")[1].value;
    });
    this.on("sendingmultiple", function (file, response, formData) {
        formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken")[1].value;
    });
    this.on("success", function (file, response) {
        file.serverID = response.id;
    });
    this.on("error", function (file, response) {
        var r = response;
        console.log("Drop Err:");
        console.log(r);
    });
}};

在我的控制器中我试过这个：

    [HttpPost]
    [FormAttributes.DisableFormValueModelBinding]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Upload(ICollection<IFormFile> files)

还有这个

        [HttpPost]
    [FormAttributes.DisableFormValueModelBinding]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Upload(IFormFile file)

文件和文件都返回 0 或 null

唯一有效的是

    [HttpPost]
    [FormAttributes.DisableFormValueModelBinding]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Upload(ICollection<IFormFile> files)
    {
        if (ModelState.IsValid)
        {

            var more = HttpContext.Request.Form.Files;
            ... do stuff
        } }

我基本上忽略了文件的输入参数
谁能告诉我上传的正确参数是什么？

对于参考，我查看了以下链接：
MVC 6 HttpPostedFileBase?
https://dotnetthoughts.net/uploading-images-aspnet-core-and-dropzone/

Answer 1

如果您将选项uploadMultiple 设置为true，则Dropzone 会将[] 附加到paramName。在查看了来自 html5 多文件上传的请求后，我注意到该请求没有将索引添加到文件名 (files[n])。 Dropzone.js 这样做是为了解决这个问题。如果您将 paramName 选项添加到 Dropzone JS 配置并让它调用返回文件的方法，您将获得与 html5 多文件上传相同的行为。您也可以参考this link 了解更多关于 Dropzone.js 的配置选项

Razor 视图和 js

<div id="dropzone">
  <form action="/Home/Upload" method="post" enctype="multipart/form-data"
      id="myAwesomeDropzone" class="dropzone needsclick dz-clickable dropzone-previews">
    @Html.AntiForgeryToken()
    <div></div>
    <div class="dz-message needsclick">
        <button type="button" class="dz-button">Drop files here or click to upload.</button><br />
    </div>
    <span class="note needsclick">

    </span>
</form>

@section Scripts
 {
  <link rel="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
  <script>
   function myParamName() {
       return "files";
    }

    Dropzone.options.myAwesomeDropzone = {
    paramName: myParamName, // The name that will be used to transfer the file
    maxFiles: 5,
    maxFilesize: 100,
    uploadMultiple: true,
    accept: function (file, done) {
        if (file.name === "justinbieber.jpg") {
            done("Naha, you don't.");
        }
        else { done(); }
    },
    init: function () {
        this.on("sending", function (file, response, formData) {
            formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken").value;
        });
        this.on("sendingmultiple", function (file, response, formData) {
            formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken").value;
        });
        this.on("success", function (file, response) {
            file.serverID = response.id;
        });
        this.on("error", function (file, response) {
            var r = response;
            console.log("Drop Err:");
            console.log(r);
        });
    }};
  </script>
}

控制器

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Upload(ICollection<IFormFile> files)

结果

Answer 2

TL;DR 总结@Xueli Chen 的回答：

前端：

function workaroundDropzone() {
 return "files";
}

new Dropzone("div#yourId", { 
    paramName: workaroundDropzone,
    uploadMultiple: true
});

后端：

public async Task<JsonResult> DropzoneActionHandler(ICollection<IFormFile> files) {

}

技巧在于创建一个返回具有所需参数名称的字符串的方法，Dropzone 不会像 paramName 设置为字符串那样用 [] 覆盖它。使用版本 5.2.7 测试