Question

我正在尝试使用Dropzone.js将一组IFormFile（图像）发送到以下ASP.NET Core 2.1 Api控制器操作：

    [HttpPost("[action]")]
    public async Task<IActionResult> Upload([FromForm] ICollection<IFormFile> files)
    { ... }

我能够成功地从Postman向此Api发送文件。但我无法从我的UI发送文件，这实现了Dropzone。我在Razor页面中使用ASP表单

    <div>
        <form action="/api/images/upload"
              class="dropzone needsclick dz-clickable"
              id="image-upload"
              method="post"
              enctype="multipart/form-data">
            <div class="dz-message needsclick">
                <span class="note needsclick">
                    Drop files here or click to upload.
                </span>
            </div>
        </form>
    </div>

使用Dropzone的以下实现

/* Dropzone */
// "imageUpload" is the camelized version of the HTML element's ID
Dropzone.options.imageUpload = {
    paramName: "files", // The name that will be used to transfer the file
    dictDefaultMessage: "Drop files here or Click to Upload",
    addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
    init: function() {
        myDropzone = this;
        myDropzone.on("success", function(file, response) {
            console.log("Success");
            myDropzone.removeFile(file);
        });                    
    }
};

此设置 - 以及类似的变体 - 将空集合发送到Api ，如屏幕截图所示：

我已尝试在此处发布类似问题的解决方案（例如this或this）。我也尝试调整表单设置和Dropzone配置。我尝试的一切都没有奏效。正如我上面提到的，我可以从Postman发布到Api，所以我怀疑问题出在我的UI设置中。有人可以帮忙吗？

更新

    <div class="box content">
        <hr>
        <h2>Upload photos</h2>
        <div>
            <form action="/api/images/upload"
                  class="dropzone needsclick dz-clickable"
                  id="image-upload"
                  method="post"
                  enctype="multipart/form-data">
                <div class="dz-message needsclick">
                    <span class="note needsclick">
                        Drop files here or click to upload.
                    </span>
                </div>
            </form>
        </div>
        <h2>Generated Thumbnails</h2>
        <!-- <p><span id="gallery-note">Gallery refreshes from storage container image links every 5 seconds.</span></p> -->
        <div id="stored-images"></div>
        <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
        <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>
    </div>

    <div class="box footer">
        <hr>
        <div class="privacy">

        </div>
    </div>
</main>


@section scripts {
    <script>
        // init gallery for later use
        var gallery;

        // Grab links for images from backend api
        function fetchImageLinks() {
            // Fetch images
            //alert("1");
            //http://localhost:61408/api/Images/thumbnails
            $.get("/api/Images/thumbnails", function (fetchedImageLinks) {
                //alert("2");
                console.log(fetchedImageLinks)

                // Check if anything is in there
                if (_.isEmpty(fetchedImageLinks)) {
                    console.log('empty fetched')
                    // do nothing
                } else {
                    // Check if we have a gallery initialized
                    if (_.isEmpty(gallery)) {
                        // initialize gallery
                        gallery = blueimp.Gallery(
                            fetchedImageLinks, // gallery links array
                            {
                                container: '#blueimp-gallery-carousel',
                                carousel: true
                            } // gallery options
                        );
                    } else {
                        // check if images are equal to array
                        console.log('currently in gallery:')
                        console.log(gallery.list)
                        var imageLinksEqual = _.isEqual(_.sortBy(gallery.list.map(s => s.split("?")[0])), _.sortBy(fetchedImageLinks.map(s => s.split("?")[0])))
                        if (imageLinksEqual) {
                            console.log('images arr are equal')
                            // do nothing
                        } else {
                            console.log('images arr are not equal')

                            // update gallery with new image urls. Only compare actual url without SAS token query string
                            var newImageLinks = _.difference(fetchedImageLinks.map(s => s.split("?")[0]), gallery.list.map(s => s.split("?")[0]))

                            console.log('differene is: ')
                            console.log(newImageLinks)
                            // Only add new images
                            gallery.add(newImageLinks);

                            // Force image load
                            gallery.next();
                        }
                    }
                }
            });
        }

        // Start first interval
        fetchImageLinks()

        setInterval(function () {
            fetchImageLinks()
        }, 5000)

        function myParamName() {
            return "files";
        }
        /* Dropzone */
        // "imageUpload" is the camelized version of the HTML element's ID
        Dropzone.options.imageUpload = {
            paramName: "files", // The name that will be used to transfer the file
            //uploadMultiple: true,
            //paramName: myParamName,
            dictDefaultMessage: "Drop files here or Click to Upload",
            addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
            init: function () {
                myDropzone = this;
                myDropzone.on("success", function (file, response) {
                    console.log("Success");
                    myDropzone.removeFile(file);
                });
            }
        };

    </script>
}

Answer 1

检查您的dropzone设置是否正确应用。我按原样尝试了你的代码，它对我来说很好。但是，如果我从页面中删除了Dropzone配置，那么我得到一个0的文件数。

要解决此问题，请将dropzone配置放入包含dropzone的.cshtml页面中，您应该看到它正常工作，例如：

Index.cshtml

<div>
    <form action="/api/images/upload"
          class="dropzone needsclick dz-clickable"
          id="image-upload"
          method="post"
          enctype="multipart/form-data">
        <div class="dz-message needsclick">
            <span class="note needsclick">
                Drop files here or click to upload.
            </span>
        </div>
    </form>
</div>

@section Scripts {
<script>
    /* Dropzone */
    // "imageUpload" is the camelized version of the HTML element's ID
    Dropzone.options.imageUpload = {
        paramName: "files", // The name that will be used to transfer the file
        dictDefaultMessage: "Drop files here or Click to Upload",
        addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail            
        init: function () {
            myDropzone = this;
            myDropzone.on("success", function (file, response) {
                console.log("Success");
                myDropzone.removeFile(file);
            });
        }
    };
</script>
}

现在，如果您从页面中删除@section，当您尝试上传文件时，您将开始获得files.count 0。

如果要将dropzone配置放在单独的文件中，则需要确保将其正确加载到页面中，例如将脚本部分更改为：

@section scripts {
    <script src="~/scripts/dropzone-config.js"></script>
}

...使用dropzone配置文件的正确路径

从Dropzone.js发送时，为什么IFormFile集合为空？

1 个答案: