英文:
aspnetboilerplate .net core, multipage web application v8.1.0 file upload
问题
我正在尝试使用aspnetboilerplate .net core构建一个多页面Web应用程序,版本为8.1.0,但在控制器操作方法中得到了null值。以下是我的代码:
var product = _$form.serializeFormToObject();
var uploadFiles = [];
$.each(_$form.find('input[type="file"]'), function (i, tag) {
$.each($(tag)[0].files, function (i, file) {
uploadFiles.push(file);
});
});
product.imageFiles = uploadFiles;
abp.ajax({
url: 'Products/Create',
data: JSON.stringify(product),
}).done(function (data) {
_$modal.modal('hide');
abp.notify.success('Success message');
});
View Model:
public class FileViewModel
{
public IFormFile ImageFiles { get; set; }
}
Controller Action:
[HttpPost]
public async Task<IActionResult> Create([FromForm] FileViewModel product)
{
//product.ImageFiles = null
//There are no errors but porduct.ImageFiles always null
return Json("ok");
}
请注意,您的代码中有一些HTML和JavaScript的部分,这些部分不需要翻译。如果您需要进一步的帮助,可以提出具体的问题。
英文:
I am trying to build a file upload with the aspnetboilerplate .net core, multi page web application, version 8.1.0. I am getting null in the controller action method. Here is my code:
var product = _$form.serializeFormToObject();
var uploadFiles = [];
$.each(_$form.find('input[type="file"]'), function (i, tag) {
$.each($(tag)[0].files, function (i, file) {
uploadFiles.push(file);
});
});
product.imageFiles = uploadFiles;
abp.ajax({
url: 'Products/Create',
data: JSON.stringify(product),
}).done(function (data) {
_$modal.modal('hide');
abp.notify.success('Success message');
});
View Model:
public class FileViewModel
{
public IFormFile ImageFiles { get; set; }
}
Controller Action:
[HttpPost]
public async Task<IActionResult> Create([FromForm] FileViewModel product)
{
//product.ImageFiles = null
//There are no errors but porduct.ImageFiles always null
return Json("ok");
}
答案1
得分: 1
ABP AJAX选项中的默认contentType是'application/json'。
需要将contentType: 'application/json',
更改为contentType: 'multipart/form-data',
。我在您的代码中没有找到您在使用它,所以请添加它。
abp.ajax({
url: 'Products/Create',
contentType: 'multipart/form-data',
data: JSON.stringify(product),
}).done(function (data) {
_$modal.modal('hide');
abp.notify.success('成功消息');
});
英文:
The default contentType in ABP AJAX Options is 'application/json'.
You need to change contentType: 'application/json',
to contentType: 'multipart/form-data',
. I don't find you use this in your code, so please add it.
abp.ajax({
url: 'Products/Create',
contentType: 'multipart/form-data',
data: JSON.stringify(product),
}).done(function (data) {
_$modal.modal('hide');
abp.notify.success('Success message');
});
答案2
得分: 0
我用不同的方法解决了这个问题。以下是我的代码:
jQuery:
var input = _$form.find('input[type="file"]')[0];
var files = input.files;
var formData = new FormData();
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
abp.ajax({
url: 'Products/Create',
processData: false,
contentType: false,
data: formData,
}).done(function (data) {
//abp.notify.success('Success message');
});
Controller Action:
[HttpPost]
public ActionResult Create(IList<IFormFile> files)
{
foreach (var formFile in files)
{
if (formFile.Length > 0)
{
Guid guid = Guid.NewGuid();
var path = "product-images\\" + guid.ToString() + "-" + formFile.FileName;
var filePath = Path.Combine(_environment.WebRootPath, path);
using (var stream = System.IO.File.Create(filePath))
{
formFile.CopyTo(stream);
}
}
}
return Json("ok");
}
英文:
I have solved this issue in different way. Here are my codes:
jQuery:
<!-- language: lang-js -->
var input = _$form.find('input[type="file"]')[0];
var files = input.files;
var formData = new FormData();
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
abp.ajax({
url: 'Products/Create',
processData: false,
contentType: false,
data: formData,
}).done(function (data) {
//abp.notify.success('Success message');
});
<!-- end snippet -->
Controller Action:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
[HttpPost]
public ActionResult Create(IList<IFormFile> files)
{
foreach (var formFile in files)
{
if (formFile.Length > 0)
{
Guid guid = Guid.NewGuid();
var path = "product-images\\" + guid.ToString() + "-" + formFile.FileName;
var filePath = Path.Combine(_environment.WebRootPath, path);
using (var stream = System.IO.File.Create(filePath))
{
formFile.CopyTo(stream);
}
}
}
return Json("ok");
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论