Передача изображений между Angular и Web API Core

Question

Я пытался сделать передачу изображения между Angular и Web API-ядром и наоборот от 3-х дней, и я не могу этого сделать. Я много искал в интернете, но я не нашел ни одного примера для ядра web api.

Я буду очень благодарен, если кто-нибудь предоставит мне ссылку на документацию / примеры или некоторые учебные пособия.

Сейчас я делаю передачу данных между Angular и API через объекты Json. Как я могу конвертировать изображения в JSON для передачи?

Извините, если это основной вопрос, так как я новичок в этом.

Answer 1

Почему вы конвертируете изображение в формат JSON?

Вы передаете свой файл непосредственно в сервис. Это идея. Контроллер получает файл, отправленный POST

BACKEND

    using System.Net.Http.Headers;

                [HttpPost]
            public ActionResult UploadFile()
            {
                try
                {
                    var file = Request.Form.Files[0];

                    if (file.Length > 0)
                    {
                        string fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName;
                        string fullPath = Path.Combine(@"C:\wwwroot\upload", fileName);
                        using (var stream = new FileStream(fullPath, FileMode.Create))
                        {
                            file.CopyTo(stream);
                        }
                    }
                    return Json("OK");
                }
                catch (System.Exception ex)
                {
                    return Json("Failed");
                }
            }

ВНЕШНИЙ ИНТЕРФЕЙС

export class UploadComponent {
  constructor(private http: HttpClient) { }

  upload(files) {
    if (files.length === 0)
      return;

    const formData = new FormData();

    for (let file of files)
      formData.append(file.name, file);

    const uploadReq = new HttpRequest('POST', `api/uploadFile`, formData);

    this.http.request(uploadReq).subscribe(event => {
      if (event.type === HttpEventType.Response)
        //DONE
    });
  }
}

HTML

<input #file type="file" (change)="upload(file.files)" />