使用 .NET Core 2.2 上传图像

Question

我有一个显示成员当前数据的表单，包括他的照片。在他的照片下方，他可以选择上传另一张照片，然后我用控制器中的新照片替换旧照片。

我的问题是我无法恢复模型中的图像，它始终为空（其余的都很完美）。

在我的模型中，我声明了一个Member_UploadPicture类型为 的变量IFormFile。

我遵循了最近的 Microsoft 教程（https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.2），但没有任何效果，仍然为 null 。

我尝试使用@Html.Editor带有变量名称的 an 以及 an<input type = file>但 2 始终为空。

你有想法吗？

模型

public class MemberViewModel

{

    public string Member_NameFirst { get; set; }

    public string Member_NameLast { get; set; }

    public byte[] Member_Picture { get; set; }

    public IFormFile Member_UploadPicture { get; set; }

    public string Member_Picture_Show { get; set; }

    // other properties...

}

控制器

[Authorize(Roles = "Member, Admin")]

[HttpPost]

public async Task<IActionResult> GetMember(MemberViewModel model)

{

    if (ModelState.IsValid)

    {

        var MembertoUpdate = new MemberViewModel

        {

          //code

        };

        using (var memomyStream = new MemoryStream())

        {

            await model.Member_UploadPicture.CopyToAsync(memomyStream);

            MembertoUpdate.Member_Picture = memomyStream.ToArray();

        }

        return Ok(model);

    }

    else return BadRequest();

}

看法

    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "formAll", style = "margin-top:3%", enctype = "multipart/form-data" }))

    {

        <div class="panel panel-primary">

            <div class="panel-heading">

                <h3 class="panel-title">Personnal</h3>

            </div>

            <div class="panel-body">

                <div id="formMember" class="row col-xs-12">

                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                    <div class="col-xs-6">

                        <div class="form-check-inline col-xs-12" style="margin-top:2%">

                        </div>

                    </div>

                </div>

            </div>

        </div>

}

Answer 1

因为var formData = $("#formAll").serialize();，它不能序列化IFormFile，你需要追加IFormFile到formData.<script type="text/javascript">&nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; $("#formAll").submit(function (event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var formData = new FormData();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formData.append('Member_NameFirst', $('#Member_NameFirst').val());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formData.append('Member_UploadPicture', $('#Member_UploadPicture')[0].files[0]);&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "https://localhost:44307/home/getmember",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: formData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //code&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //code&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; })</script>

Answer 2

消除@Html.EditorFor(model => model.Member_UploadPicture, new { htmlAttributes = new { @class = "form-control-file", @id = "Member_UploadPicture" } })添加到你的ajax请求processData: false,contentType: false,