aspnetboilerplate .net core, multipage web application v8.1.0 文件上传

huangapple go评论62阅读模式
英文:

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(&#39;input[type=&quot;file&quot;]&#39;), function (i, tag) {
            $.each($(tag)[0].files, function (i, file) {
                uploadFiles.push(file);
            });
        });
        product.imageFiles = uploadFiles;

 abp.ajax({
            url: &#39;Products/Create&#39;,
            data: JSON.stringify(product),
        }).done(function (data) {
            _$modal.modal(&#39;hide&#39;);
            abp.notify.success(&#39;Success message&#39;);
            
        });

View Model:

    public class FileViewModel
    {
        public IFormFile ImageFiles { get; set; }
    }

Controller Action:

        [HttpPost]
        public async Task&lt;IActionResult&gt; Create([FromForm] FileViewModel product)
        {
            //product.ImageFiles = null
            //There are no errors but porduct.ImageFiles always null

            return Json(&quot;ok&quot;);
        }

答案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'.

aspnetboilerplate .net core, multipage web application v8.1.0 文件上传

You need to change contentType: &#39;application/json&#39;, to contentType: &#39;multipart/form-data&#39;,. I don't find you use this in your code, so please add it.

 abp.ajax({
        url: &#39;Products/Create&#39;,
        contentType: &#39;multipart/form-data&#39;,
        data: JSON.stringify(product),
    }).done(function (data) {
        _$modal.modal(&#39;hide&#39;);
        abp.notify.success(&#39;Success message&#39;);
        
    });

答案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(&#39;input[type=&quot;file&quot;]&#39;)[0];
        var files = input.files;
        var formData = new FormData();

        for (var i = 0; i != files.length; i++) {
            formData.append(&quot;files&quot;, files[i]);
        }
        
abp.ajax({
                    url: &#39;Products/Create&#39;,
                    processData: false,
                    contentType: false,
                    data: formData,

                }).done(function (data) {
                    //abp.notify.success(&#39;Success message&#39;);
                });        

<!-- end snippet -->

Controller Action:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

[HttpPost]
        public ActionResult Create(IList&lt;IFormFile&gt; files)
        {
            foreach (var formFile in files)
            {
                if (formFile.Length &gt; 0)
                {
                    Guid guid = Guid.NewGuid();
                    var path = &quot;product-images\\&quot; + guid.ToString() + &quot;-&quot; + formFile.FileName;
                    var filePath = Path.Combine(_environment.WebRootPath, path);

                    using (var stream = System.IO.File.Create(filePath))
                    {
                        formFile.CopyTo(stream);
                    }
                  
                }
            }

            return Json(&quot;ok&quot;);
        }

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月16日 03:10:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76484831.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定