Angular 2 - загрузка файла

Question

Мне нужно создать загрузку изображений на мой веб-сервер в моем приложении Angular 2. Кто-нибудь может дать мне несколько советов, как этого добиться?

Это предварительные условия:

• Веб-сервис ASMX, общающийся в формате JSON.
• почтовый метод, используемый для общения.
• JPEG / PNG размером до 1 МБ.

Концепция, которой я хотел следовать (но не удалось)

Загрузите содержимое JPEG в переменную, закодируйте его, используя кодировку Base64, и отправьте его в службу ASMX, которая будет принимать два параметра (токен для аутентификации и закодированные данные).

В чем конкретно заключается моя проблема?

Веб-служба была легкой частью, она сделана и работает, но мне не удается получить содержимое файла для завершения. Я использовал это:

component.html

...
<input type="file" (change)="fileChangeEvent($event)" />
...

component.ts

private fileChangeEvent(fileInput: any) {
    let image = fileInput.target.files[0] as File;
    ...
}

Как вы, наверное, догадались, проблема в классе File, потому что он предоставляет мне только основную информацию о файле (имя, размер, последний модификатор,...), но я не могу получить содержимое файла. Или, по крайней мере, я не знаю, как это получить. Я также проверил другие вопросы здесь на SO, но во всех ответах было что-то особенное, что не отвечало моим требованиям. И, может быть, я просто слепой, но я не вижу, откуда взялся контент.

Итак, есть ли кто-нибудь, кто может дать мне некоторые рекомендации для подражания?

Заранее большое спасибо.

Answer 1

Я оставил этот вопрос открытым для опытных парней, которые могли бы ответить на него. Ответа пока нет, и я узнал ответ вчера. Итак, после некоторого исследования и модификации поисковой фразы, я узнал ответ. Существует тип FileReader, который можно использовать для чтения содержимого файла. Вот источник ответа:

Получение байтового массива через тип ввода = файл

Благодаря оригинальному ответу теперь я знаю, как это сделать.