代码之家 › 专栏 › 技术社区 › Korpin

使用.NET Core 2.2上载图像

asp.net-core model-view-controller .net c#

-1

Korpin · 技术社区 · 6 年前

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

我的问题是我无法恢复我的模型中的图像,它总是空的(其余的都很完美)。

在我的模型中,我声明 Member_UploadPicture 类型的变量 IFormFile .

我学习了最近的微软教程( https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.2 )但是什么都不起作用,仍然是空的。

我尝试了一个 @Html.Editor 变量的名称以及 <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%">
                            <img id="ItemPreview" src="data:image/png;base64, @Model.Member_Picture_Show" style="height:200px; width:200px; margin-left:35%; border:solid 1px black">
                        </div>
                        <div class="form-check-inline col-xs-12" style="margin-top:2%; margin-left:35%">
                            @Html.LabelFor(model => model.Member_UploadPicture, "Upload Picture", new { htmlAttributes = new { @id = "test" } })
                            @Html.EditorFor(model => model.Member_UploadPicture, new { htmlAttributes = new { @class = "form-control-file", @id = "Member_UploadPicture" } })
                            <input type="file" class="form-control-file" name="Member_UploadPicture" id="Member_UploadPicture">
                            <small id="fileHelp" class="form-text text-muted">Maximum 1024kb</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
}

Ajax调用

function Edit() {

    $(function () {
        $("#formAll").submit(function (event) {
            event.preventDefault();

            var formData = $("#formAll").serialize();

            $.ajax({
                url: "https://localhost:44338/Members/GetMember/",
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function (data) {
                    //code
                },
                error: function (error) {
                    //code
                }
            });
        })
    });
}

2 回复 | 直到 6 年前

Edward 6 年前

为了 var formData = $("#formAll").serialize(); ,它无法序列化 IFormFile ,需要追加 iformfile文件 到 formData .

<script type="text/javascript">
    $(document).ready(function () {
        $("#formAll").submit(function (event) {
            event.preventDefault();

            var formData = new FormData();
            formData.append('Member_NameFirst', $('#Member_NameFirst').val());
            formData.append('Member_UploadPicture', $('#Member_UploadPicture')[0].files[0]);
        $.ajax({
                url: "https://localhost:44307/home/getmember",
                type: 'POST',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    //code
                },
                error: function (error) {
                    //code
                }
            });
        })        })
</script>

Rick 6 年前

去除

@Html.EditorFor(model => model.Member_UploadPicture, new { htmlAttributes = new { @class = "form-control-file", @id = "Member_UploadPicture" } })

向您添加Ajax请求

processData: false,
contentType: false,