如何将 Dropzone.js 有效负载添加到 ViewModel，然后传递给控制器

Question

我正在使用 DropZone.JS 在我的部分视图中处理我的图像上传，并希望捕获图像数据，将其添加到模型，并将模型传递给控制器。我看到了发送表单数据并使用控制器捕获它的方法，但我更喜欢在模型中使用它，这样我就可以添加元数据并更轻松地处理它。

目前我不知道如何填充我模型的文件参数以及它在控制器中作为 null 出现

Upload.cshtml

    <form action="@Url.Action("UploadImage", "Listings", new { Model_Name = "K-1" })" class="dropzone" id="image_upload_dropzone">
    </form>

    <button class="btn btn-primary" id="removeAllImages" type="button" style="margin-right: 5px;margin-left: 5px;background-color: rgba(0,123,255,0);color: rgb(3,3,3);">
        Remove Images
    </button>

    <input type="button" value="Upload" id="upload_images" class="btn btn-primary" />
</div>

<script type="text/javascript">

    //Dropzone Configuration
    //Dropzone.autoDiscover = false;

    Dropzone.autoDiscover = false;

    $(document).ready(function () {
        // Manual dropzone init
        $("#image_upload_dropzone").dropzone({
            init: function () {
                var $this = this;
                $("button#delete_images").click(function () {
                    $this.removeAllFiles(true);
                });
            },
            paramName: "files",
            addRemoveLinks: true,
            maxFilesize: 5, // mb
            maxFiles: 5,
            parallelUploads: 5,
            acceptedFiles: "image/*",
            uploadMultiple: true,
            autoProcessQueue: false,
        });
    });

    $('#upload_images').click(function () {
        var myDropzone = Dropzone.forElement("#image_upload_dropzone");
        myDropzone.processQueue();
    });

</script>

ViewModel.cs

    {
        public int Listing_ID { get; set; }
        public IFormFile[] Files { get; set; }
        public string Model_Name { get; set; }

    }

Controller.cs

        public async Task<IActionResult> UploadImage(UploadViewModel model)
        {
            var filePath = Path.GetTempFileName();

            string ext = System.IO.Path.GetExtension(model.File.FileName);
            string randomPath = Path.GetFileNameWithoutExtension(Path.GetRandomFileName());

            string prefix = model.Model_Name;

            if (prefix == null)
            {
                prefix = "";
            }

            // K-22_1a2b3c4d.png
            string newPath = prefix + "_" + randomPath + ext;

            using (var stream = model.File.OpenReadStream())
            {
                await bunnyCDN.UploadAsync(stream, "/folder/" + newPath);
            }

            return RedirectToAction("Index");
        }

Answer 1

如果您将选项 uploadMultiple 设置为 true，则 Dropzone 会将 [] 附加到 paramName。您可以为 paramName 选项调用 returns "Files" 参数的方法，如下所示：

<script type="text/javascript">

    function myFileParam() {
       return "Files";
    }
    Dropzone.autoDiscover = false;

    $(document).ready(function () {
        // Manual dropzone init
        $("#image_upload_dropzone").dropzone({
            init: function () {
                var $this = this;
                $("button#delete_images").click(function () {
                    $this.removeAllFiles(true);
                });
            },
            paramName: myFileParam,
            addRemoveLinks: true,
            maxFilesize: 5, // mb
            maxFiles: 5,
            parallelUploads: 5,
            acceptedFiles: "image/*",
            uploadMultiple: true,
            autoProcessQueue: false,
        });
    });

    $('#upload_images').click(function () {
        var myDropzone = Dropzone.forElement("#image_upload_dropzone");
        myDropzone.processQueue();
    });

</script>

结果：

如何将 Dropzone.js 有效负载添加到 ViewModel，然后传递给控制器

How to add Dropzone.js payload to ViewModel and then pass to controller

asp.net

asp.net-mvc

post

dropzone.js

asp.net-core