Как загрузить данные файла в объект json в Angular 7

Question

Слушай, мой угловой проект имеет форму регистрации пользователя, в которой я хочу загрузить изображение пользователя и ввести данные push в web api.В этом случае я отправлю введенные пользователем данные в объект json.Поэтому я хочу отправить данные файла загрузки, а также другие данные в тело объекта.

В отдельной функции я буду вызывать файл для загрузки, это нормально. (Я сделаю это для целей тестирования, но я хочувыдвигать как один объект со всеми данными)

Угловой 7 cli

registed-page.component.ts

onSubmit(form:NgForm){ 
    var customerData = { 
       "cusName": form.value.userName,
       "cusPassword": form.value.password,
       "cusEmail": form.value.email, 
       "cusImage" : ############
    }; 

    //OTHER CODE TO PUSH THAT JSON OBJECT TO WEB API-------
}




 //for image upload ----------------------------------------
  public uploadFile (getData){
    if (getData.length === 0) {
      return;
    }

    let fileToUpload = <File>getData[0];
    const ImageData = new FormData();
    ImageData.append('file', fileToUpload, fileToUpload.name);

    this.http.post('https://localhost:44301/api/Customer/CustomerFileUpload', ImageData)
      .subscribe(event => {
        console.log("imae upload ----> "+event) 
      });
  }
  //for image upload ----------------------------------------

register-page-component.html

<form (ngSubmit)="onSubmit(formData)" #formData="ngForm" > 

  <input  #file type="file"  name="file" >

  <input 
  (click)="uploadFile(file.files)"   
  class="btn btn-large btn-lg btn-circle"   
  type="submit">

</form>

Answer 1

Вы можете преобразовать файл в byte array / binary string / base64 и передать его с помощью json.

Есть много способов конвертировать файл. Пожалуйста, найдите сообщение ниже

Конвертировать файл в байтовый массив

Один из них - преобразовать его в base64:

fileToUpload.toDataURL("image/jpeg")

Для передачи данных в формате formData:

UI:

  let formData: FormData = new FormData();
  formData.append("cusImage", fileToUpload);
  formData.append('cusName', form.value.userName);
  formData.append("cusPassword", form.value.password);
  formData.append('cusEmail', form.value.email);

  this.http.post(apiUrl, formData)
  .subscribe(event => {
    console.log(event) 
  });

Backend

Контроллер

    [HttpPost]
    [Route("upload")]
    public async Task<IActionResult> Upload([FromForm]FileUploadDTO model)
    {
       //Code to save data
         ...
    }

Модель

public class FileUploadDTO
{
    public IFormFile cusImage { get; set; }
    public string cusName { get; set; }
    public string cusPassword { get; set; }
    public string cusEmail { get; set; }
}