英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。



评论