Как передать на сервер изображение как массива байтов?

Question

[Nik Faraday]

Здравствуйте!

Есть у меня инпут файлов, и есть кнопка. По клику на кнопку мне нужно(возможно) перекинуть на сервер изображение в виде массива байтов, но я что-то вообще запутался с ajax отправкой и есть у меня какой-то вот такой код

$('#upload-profile-image-btn').on('click', () => {
    $.ajax({
        url: '@Url.Action("UploadProfileImage", "Account")',
        method: 'post',
        data: document.getElementById($('#upload-avatar').prop('id')).files[0],
        success: (response) => {
            alert("Success");
            console.log(response);
        },
        error: (response) => {
            alert("Error");
            console.log(response);
        }
    })
});

Но он не работает (логично, хаха)

И так же у меня есть модель данных для отправки на сервер:

public class ChangeProfileImageHttpPostVm
    {
        public long Id { get; set; }
        public byte[] Avatar { get; set; }
    }

И тут у меня возникает ещё один вопрос, нужно ли вообще мне конвертировать его в массив байтов перед отправкой на сервер, или можно это сделать непосредственно на сервере? Ну, меня в первую очередь интересует, как отправить на сервер в виде массива байтов, ориентируюсь на эту статью на метаните по отправке изображений на сервер (И загрузка в БД), но мне не подходит там отправка формой, мне нужно сделать отправку через ajax.

Логично предположить, что если можно отправить массивом байтов с формы, значит так же можно и отправить через ajax, тут и вопрос самого ВОПРОСА (тавтология), как это сделать?

UPD: в интернете искал, но там что-то всё делается через какой-то canvas, с каким я не то. что бы плохо знаком, а вообще его не видел и не знаю что это и с чем его едят. Есть некоторые статьи, но они плохо описывают то, что мне нужно.
Конечно, я буду параллельно смотреть и сам и искать выход (Может для кого-то задача покажется лёгкой), но может и кто-то предложит более лёгкое решение

Answer 1

[humoured]

Гуглите в сторону AJAX и FormData — эти ключевые слова дадут сотню отличных статей реализации задачи на JS.
Заморчиваться насчёт кодировки данных при передаче даже не придётся: файл и так отправится "байтами", в формате multipart/form-data. Прямо как отправка через форму, только без формы.

Comments

[Nik Faraday]

humoured FormData я юзал, что-то забыл за него, спасибо. А что можете сказать на счёт структуры ajax запроса? Просто я видел, что для различных типов запросов ajax объект строится по-разному. Для примера, где-то может вообще юзаться contentType: false вместо contentType: 'application/json' и т.д.

[humoured]

Nik Faraday, построение "ajax объекта" зависит от js-фреймворка, который используется. Отправка данных формы на сервер — самая простая из задач.

Над заголовком contentType здесь можно не заморачиваться: multipart/form-data — это и есть тип кодировки контента, content type, если понимаете о чём я.

Этот заголовок нужно заполнять, когда на сервер отправляется вручную собранный контент, например json-данные. По значению заголовка сервер будет знать, как интерпретировать присланные данные.

[Nik Faraday]

humoured, большууущее спасибо, что объяснили. Обычно я использую contentType: 'application/json; charset=utf-8', как уже описывал выше. Буду пробовать дальше

[Nik Faraday]

humoured, вот так вот:

$.ajax({
        url: '@Url.Action("UploadProfileImage", "Account")',
        method: 'post',
        data: formData,
        contentType: 'multipart/form-data',
        processData: false,
        success: (response) => {
            alert("Success");
            console.log(response);
        },
        error: (response) => {
            alert("Error");
            console.log(response);
        }
    })

Модель приходит null. Вот так вот:

$.ajax({
        url: '@Url.Action("UploadProfileImage", "Account")',
        method: 'post',
        data: formData,
        contentType: false,
        processData: false,
        success: (response) => {
            alert("Success");
            console.log(response);
        },
        error: (response) => {
            alert("Error");
            console.log(response);
        }
    })

Фотография приходит как null. Что тут можно сделать?

[Rerurk]

я воспользовался этим методом

[Nik Faraday]

Rerurk, немного не то