asp.net-mvc - dropzone 和 asp.net core 3.1 - 发送到控制器的正确参数是什么?
问题描述
我在我的剃刀观点中有这个:
<div id="dropzone">
<form action="/Controller/Upload" method="post" enctype="multipart/form-data"
id="my-awesome-dropzone" class="dropzone needsclick dz-clickable dropzone-previews">
@Html.AntiForgeryToken()
<div ></div>
<div class="dz-message needsclick">
<button type="button" class="dz-button">Drop files here or click to upload.</button><br />
</div>
<span class="note needsclick">
</span>
</form>
这在我的js中:
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFiles: mediaMax,
maxFilesize: maxSize,
uploadMultiple: true,
accept: function (file, done) {
if (file.name === "justinbieber.jpg") {
done("Naha, you don't.");
}
else { done(); }
},
init: function () {
this.on("sending", function (file, response, formData) {
formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken")[1].value;
});
this.on("sendingmultiple", function (file, response, formData) {
formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken")[1].value;
});
this.on("success", function (file, response) {
file.serverID = response.id;
});
this.on("error", function (file, response) {
var r = response;
console.log("Drop Err:");
console.log(r);
});
}};
在我的控制器中我试过这个:
[HttpPost]
[FormAttributes.DisableFormValueModelBinding]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(ICollection<IFormFile> files)
和这个
[HttpPost]
[FormAttributes.DisableFormValueModelBinding]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(IFormFile file)
文件和文件都返回 0 或 null
唯一有效的是
[HttpPost]
[FormAttributes.DisableFormValueModelBinding]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(ICollection<IFormFile> files)
{
if (ModelState.IsValid)
{
var more = HttpContext.Request.Form.Files;
... do stuff
} }
我基本上忽略了文件的输入参数,
谁能告诉我上传的正确参数是什么?
对于参考,我查看了以下链接:
MVC 6 HttpPostedFileBase?
https://dotnetthoughts.net/uploading-images-aspnet-core-and-dropzone/
解决方案
如果您将选项uploadMultiple
设置为true
,则 Dropzone 将附加[]
到 paramName。在查看了来自 html5 多文件上传的请求后,我注意到该请求没有将索引添加到文件名 (files[n])。Dropzone.js 这样做是为了解决这个问题。如果您将 paramName 选项添加到 Dropzone JS 配置并让它调用返回文件的方法,您将获得与 html5 多文件上传相同的行为。您还可以参考此链接以获取有关 Dropzone.js 的配置选项的更多详细信息
剃刀视图和js
<div id="dropzone">
<form action="/Home/Upload" method="post" enctype="multipart/form-data"
id="myAwesomeDropzone" class="dropzone needsclick dz-clickable dropzone-previews">
@Html.AntiForgeryToken()
<div></div>
<div class="dz-message needsclick">
<button type="button" class="dz-button">Drop files here or click to upload.</button><br />
</div>
<span class="note needsclick">
</span>
</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 "files";
}
Dropzone.options.myAwesomeDropzone = {
paramName: myParamName, // The name that will be used to transfer the file
maxFiles: 5,
maxFilesize: 100,
uploadMultiple: true,
accept: function (file, done) {
if (file.name === "justinbieber.jpg") {
done("Naha, you don't.");
}
else { done(); }
},
init: function () {
this.on("sending", function (file, response, formData) {
formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken").value;
});
this.on("sendingmultiple", function (file, response, formData) {
formData["__RequestAntiForgeryToken"] = document.getElementsByName("__RequestVerificationToken").value;
});
this.on("success", function (file, response) {
file.serverID = response.id;
});
this.on("error", function (file, response) {
var r = response;
console.log("Drop Err:");
console.log(r);
});
}};
</script>
}
控制器
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(ICollection<IFormFile> files)
推荐阅读
- android - 当我从最近的任务列表中关闭其他活动时,如何保持 mainactivity 活动?
- c++ - C ++:迭代元组时忽略候选模板
- python - ValueError:未定义 gopen 处理程序
- c - 在 C 程序中使用 0 而不是 '\0'
- date - 在 Google 表格中将时间戳字符串 (dd MMM yyyy HH:mm:ss) 转换为日期 (DD/MM/YY)
- javascript - 如何创建元素包含我创建的表单中的信息?
- module - 导出 'mysql Client' 模块会导致 ReferencesError
- reactjs - react-three:如何卸载渲染的 gltf 并使用道具替换为新的 gltf?
- javascript - 使用其余参数调用第一个函数参数的快捷方式
- mongodb - 使用从一个模型填充到另一个模型来检索数组数据