Asp.net core 为什么从Dropzone.js发送时文件集合为空？

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

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

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

我尝试过这里类似问题中的解决方案（例如，或）。我还尝试过调整表单设置和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>
}

上传照片
将文件放到此处或单击上载。
生成的缩略图
‹
›

@节脚本{
//init gallery供以后使用
var画廊；
//从后端api获取图像的链接
函数fetchImageLinks（）{
//获取图像
//警报（“1”）；
//http://localhost:61408/api/Images/thumbnails
$.get（“/api/Images/thumbnails”，函数（fetchedimagerlinks）{
//警报（“2”）；
console.log（fetchedImageLinks）
//检查里面有没有东西
if（u.isEmpty（fetchedImageLinks））{
console.log（'empty fetched'）
//无所事事
}否则{
//检查是否已初始化库
如果（uu.isEmpty（画廊））{
//初始化库
gallery=blueimp.gallery(
FetcheImage链接，//库链接数组
{
容器：“#蓝精灵画廊旋转木马”，
旋转木马：对
}//图库选项
);
}否则{
//检查图像是否等于数组
console.log（'当前在库中：'）
console.log（gallery.list）
var imageLinksEqual=.isEqual（u0.sortBy（gallery.list.map）（s=>s.split（“？”[0]）），0.sortBy（fetchedimagerlinks.map（s=>s.split（“？”[0]））
if（imageLinksEqual）{
console.log（'图像arr相等'）
//无所事事
}否则{
console.log（'图像arr不相等'）
//使用新图像url更新库。仅比较不带SAS令牌查询字符串的实际url
var newImageLinks=u2;.difference（fetchedImageLinks.map（s=>s.split（“？”[0]），gallery.list.map（s=>s.split（“？”[0]））
console.log（'差异为：'）
console.log（newImageLinks）
//仅添加新图像
添加（新图像链接）；
//强制图像加载
画廊。下一页（）；
}
}
}
});
}
//开始第一次间隔
fetchImageLinks（）
setInterval（函数（）{
fetchImageLinks（）
}, 5000)
函数myParamName（）{
返回“文件”；
}
/*下降区*/
//“imageUpload”是HTML元素ID的简化版本
Dropzone.options.imageUpload={
paramName:“files”，//将用于传输文件的名称
//uploadMultiple:true，
//paramName:myParamName，
dictDefaultMessage：“将文件放到此处或单击上载”，
addRemoveLinks:true，//允许取消文件上载并删除缩略图
init：函数（）{
myDropzone=这个；
myDropzone.on（“成功”，函数（文件，响应）{
控制台日志（“成功”）；
myDropzone.removeFile（文件）；
});
}
};
}

检查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>
}

---

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

谢谢您的回答。这令人愤怒。我已经发布了上面的完整代码，我已经确保您的建议得到了实施。不幸的是，我仍然有同样的问题。我错过什么了吗？（我在我的浏览器控制台中没有看到任何错误，这表明所有正确的库都已加载）。我还将所有JavaScript移到了一个外部文件中，如：“@section scripts{}我可以在IE11中重现该问题，所以我假设这是您的浏览器？调试器说您的scipt中有几行有错误-那些以

var-imageLinksEqual=…

和

var-imageLinksEqual=…

开头的错误，如果我对这些行进行注释，它们会正常工作。感谢您的帮助。我从控制器中删除了[ApiController]属性。我不知道为什么会影响后期行动。再次感谢您的评论。：）

    <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>
}

<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 scripts {
    <script src="~/scripts/dropzone-config.js"></script>
}