Загрузить изображение с .NET Core 2.2

У меня есть форма, которая отображает текущие данные участника, включая его фотографию. Под своей фотографией он может загрузить другую, и я заменяю старую фотографию новой в моем контроллере.

Моя проблема в том, что я не могу восстановить изображение в своей модели, оно всегда равно нулю (остальное идет отлично).

В моей модели я объявил переменную Member_UploadPicture типа IFormFile.

Я следил за недавним руководством Microsoft (https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.2), но ничего не работает, все равно null.

Я пробовал с @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 Call

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
                }
            });
        })
    });
}

Да, я только что заметил, что изображения нет в моем вызове ajax, я полагаю, поэтому он имеет значение null в моей модели ... Я только что отредактировал свой код с помощью вызова ajax.

Korpin 18.12.2018 10:28
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
2 203
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Удалить

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

добавить к вам запрос ajax

processData: false,
contentType: false,
Ответ принят как подходящий

Для 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>

Спасибо за вашу помощь. Member_UploadPicture по-прежнему имеет значение null, когда контроллер получает модель (значение имеет только Member_NameFirst), есть ли предположения?

Korpin 19.12.2018 09:10

@Korpin Есть ли демо для воспроизведения вашей проблемы?

Edward 19.12.2018 09:31
github.com/korpinz/jakform -> Вот .sln, я не могу поместить всю папку, так как у меня в ней более 100 файлов .. Не могли бы вы сказать мне, нужно ли вам что-то еще?
Korpin 19.12.2018 10:06

Кстати, представление находится в файле участников (из файла представлений) :-)

Korpin 19.12.2018 10:10

@Korpin Вам нужно внимательно проверить свой код, вы никогда не устанавливали Member_UploadPicture в ajax.

Edward 19.12.2018 10:26

Вау, вы правы ... Я почти уверен, что сделал это, потому что изначально я скопировал / вставил ваш код, но да, не знаю, что произошло! Теперь это работает .. Извините за это и большое спасибо!

Korpin 19.12.2018 10:36

Другие вопросы по теме