如何将 Dropzone.js 与 ASP.NET 核心 MVC 集成？

Question

我想使用 IFormFile 在我的数据库中上传一些文档。在客户端，我正在使用 Dropzone.js 但它无法正常工作。每当我点击提交按钮时，它都会在参数中发送一个空值。我有两个问题。 1.如何将Document(image/PDF)发送给action方法。 2. 如何重新设计（更改样式）Dropzone。（如果有人解释一下dropzone的流程那就很有用了）

Here is my HTML Code

<form asp-action="AddDocument" asp-controller="Transactions" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
    <div class="form-group form-actions">
        <div class="col-md-9 col-md-offset-4">
            <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
        </div>
    </div>
</form>

JS Code:

$(function () {
            Dropzone.options.dropzoneForm = {
                paramName: "DocumentPhotos", // The name that will be used to transfer the file
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                accept: function (file, done) {
                    done();
                }
            };
        });

and here is my Server-Side language code:

        [HttpPost]
        public async Task<IActionResult> AddDocument(IEnumerable<IFormFile> DocumentPhotos)
        {

            if (DocumentPhotos!= null)
            {
                TransactionViewModel viewModel = new TransactionViewModel();
                var documentModel = viewModel.TransactionModel.TransactionDocuemnt;
                foreach (var item in DocumentPhotos)
                {

                    using (MemoryStream stream = new MemoryStream())
                    {
                        await item.CopyToAsync(stream);
                        documentModel.DocumentPhoto = stream.ToArray();
                    }
                    documentModel.DocumentName = item.FileName;
                    documentModel.SrNo = 1;
                    documentModel.SocietyRid = UserSessionState.ApplicationUser.SocietyRid;
                }
            }

            return PartialView("TransactionDocumentForm", transactionViewModel);
        }

Scripts and CSS used (all files are downloaded from Dropzone.js):

<link rel="stylesheet" href="~/css/basic.css" />
<link rel="stylesheet" href="~/css/dropzone.css" />
<script type="text/javascript" src="~/js/dropzone.js"></script>
<script type="text/javascript" src="~/js/dropzone-amd-module.js"></script>

Answer 1

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

配置选项的更多详细信息

function myParamName() {
    return "DocumentPhotos";
}

Dropzone.options.dropzoneForm = {
   paramName: myParamName, 
   //other configuration options
}

autoProcessQueue: false 告诉 Dropzone 在您删除文件时不要自动上传文件，默认情况下会自动上传。由于 Dropzone 现在不会自动上传文件，因此您需要在单击按钮时手动告诉它这样做。所以你需要一个按钮点击的事件处理程序，它告诉 Dropzone 进行上传：

 <button type="submit" id="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>

 var wrapperThis = this;

 $("#submit").click(function (e) {
       e.preventDefault();
       wrapperThis.processQueue();
 });

完整代码

<form asp-action="AddDocument" asp-controller="Home" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
  <div class="form-group form-actions">
    <div class="col-md-9 col-md-offset-4">
        <button type="submit" id="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
    </div>
  </div>
</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 "DocumentPhotos";
        }
        Dropzone.options.dropzoneForm = {
            autoProcessQueue: false,
            paramName: myParamName, // The name that will be used to transfer the file
            uploadMultiple: true,
            parallelUploads: 100,
            init: function () {
                console.log("active");
                var wrapperThis = this;

                $("#submit").click(function (e) {
                    e.preventDefault();
                    wrapperThis.processQueue();
                });
            },
            accept: function (file, done) {
                done();
            }
        };

</script>
}

如何将 Dropzone.js 与 ASP.NET 核心 MVC 集成？

How to Integrate Dropzone.js with ASP.NET Core MVC?

html

javascript

asp.net-core-mvc

iformfile

dropzone