从Dropzone.js发送时，为什么IFormFile集合为空? [英] Why is IFormFile collection empty when sent from Dropzone.js?
问题描述
我正在尝试使用 Dropzone.js 将IFormFile(图像)的集合发送到以下内容ASP.NET Core 2.1 Api控制器操作:
I am trying to use Dropzone.js to send a collection of IFormFile (images) to the following ASP.NET Core 2.1 Api controller action:
[HttpPost("[action]")]
public async Task<IActionResult> Upload([FromForm] ICollection<IFormFile> files)
{ ... }
我能够从邮递员成功地向该Api发送文件.但是我无法从实现Dropzone的UI发送文件.我在Razor页面中使用ASP表单
I am able to successfully send files to this Api from Postman. But I cannot get it to send the files from my UI, which implements Dropzone. I am using an ASP form in a Razor page
<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实现
with the following implementation of 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 setup - and similar variations - sends an empty collection to the Api as shown in the screenshot:
我已经尝试过在此处类似问题中发布的解决方案(例如此，或此).我也尝试过调整表单设置和Dropzone配置.我尝试过的所有方法均无效.如前所述，我可以从Postman发布到Api，因此我怀疑问题出在我的UI设置上.有人可以帮忙吗?
I have tried the solutions posted in similar questions on here (e.g. this, or this). I have also tried adjusting the form setup and the Dropzone configuration. Everything I have tried has not worked. As I have mentioned, above, I can post to the Api from Postman so I suspect the problem lies in my UI setup. Can anyone help?
更新:
<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>
}
推荐答案
检查您的Dropzone设置是否正确应用.我已经按原样尝试过您的代码，但对我来说效果很好.但是，如果我从页面上删除了Dropzone配置，则文件计数为0.
Check that your dropzone settings are getting applied correctly. I have tried your code as-is and it worked fine for me. However, if I removed the Dropzone configuration from the page then I get a filecount of 0.
要解决此问题，请将dropzone配置放入包含dropzone的.cshtml页面中，例如，您应该看到它工作正常:
To get around this problem put the dropzone configuration into the .cshtml page that contains the dropzone and you should see it working OK for example:
Index.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>
}
现在，如果您从页面中删除@部分，则尝试上载文件时，开始会得到files.count为0.
Now, if you delete the @section from the page you will start getting a files.count of 0 when you try to upload the files.
如果要将dropzone配置放在单独的文件中，则需要确保将其正确加载到页面中，例如将您的脚本部分更改为:
If you want to have the dropzone configuration in a separate file then you need to ensure it is loaded into the page correctly e.g. change your scripts section to:
@section scripts {
<script src="~/scripts/dropzone-config.js"></script>
}
...使用正确的Dropzone配置文件路径
...using the correct path to your dropzone configuration file
这篇关于从Dropzone.js发送时，为什么IFormFile集合为空?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
