Ошибка при отправке изображения и данных JSON в одном запросе в угловых 8

Question

Я пытаюсь отправить изображение и некоторые данные JSON в одном запросе http post.Заголовок

this.httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}

, а моя HTML-часть -

<input #imageInput type="file" name="add-logo" accept="image/*"
    id="add-logo" (change)="onFileChanged(imageInput)" class="form-control cust-field" placeholder="">

, а функция component.ts -

    logo:File
  onFileChanged(imageInput: any) {
      const file: File = imageInput.files[0];
      this.logo = file; 
}

И ошибка

HttpErrorResponse {headers: HttpHeaders, status: 422, statusText: "Unprocessable Entity", url: "myUrl", ok: false, …}
error:
messages: ["The logo field is required."]
status: false
__proto__: Object
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for url: 422 Unprocessable Entity"
name: "HttpErrorResponse"
ok: false
status: 422
statusText: "Unprocessable Entity"
url: "url"

Я отправляю этот объект в API

{first_name: "Firts Name", last_name: "Last Name", email: "a@gmail.com", phone: "+923045203200", password: "03045203200", …}
    accounting_method: "Cash"
    business_location: [{…}]
    business_location_name: "myLegalBusiness"
    business_name: "myLegalBusiness"
    business_phone: "0304520320055"
    business_system_name: "tradeName"
    confirm_p: "03045203200"
    currency: "ALL"
    currency_id: 1
    ein_ssn: "EIN34"
    email: "asad@gmail.com"
    first_name: "Firts Name"
    fy_end_month: "MARCH"
    last_name: "Last Name"
    logo: File {name: "users.png", lastModified: 1561615773639, lastModifiedDate: Thu Jun 27 2019 11:09:33 GMT+0500 (Pakistan Standard Time), webkitRelativePath: "", size: 2550, …}
    number_of_stores: 1
    password: "03045203200"
    phone: "+923045203200"
    store_name: "store"
    store_type: "Franchise"
    unique_code: "145dd" }

Answer 1

Вы пытаетесь отправить неверный объект или данные в атрибут изображения.В угловых файлах события должны регистрироваться с помощью

this.logo = imageInput.target.files [0]

Это модифицированный код для всех случаев, попробуйте использовать этот,Если вы хотите ссылку на изображение (путь к файлу), используйте imgLink, или если вы отправляете imageData, используйте imgData. Рассмотрите html-файл

<input type="file" (change)="selectFile($event)">

и файл Ts

imgLink         : any 
imgData         : any

selectFile(event) {

    this.imgLink = ''

    this.imgData  = event.target.files[0]

    //In your case
    this.logo = this.imgData

    let mimeType  = this.imgData.type

    if (mimeType.match(/image\/*/) == null) {
      const message = "This file type is not supported, Please upload in image format"
      return
    }

    let reader = new FileReader() 
    reader.readAsDataURL(this.imgData)
    reader.onload = (event) => { 
      this.imgLink = reader.result
    }
  }

Answer 2

Вы можете использовать formData для него.

onFileChanged(imageInput: any) {

  let fi = imageInput;

  if (fi.files && fi.files[0]) {

    let fileToUpload = fi.files[0];

    let formData: FormData = new FormData();

    formData.append("file", fileToUpload);

    formData.append('first_name', "Firts Name");
    formData.append('email', "a@gmail.com");
    formData.append('logo', {name: "users.png", lastModified: 1561615773639, lastModifiedDate: Thu Jun 27 2019 11:09:33 GMT+0500 (Pakistan Standard Time), webkitRelativePath: "", size: 2550, …});
    ...

    console.log(formData)

}

Answer 3

Вы можете отправлять изображения через 'Content-Type': 'application/json'. Вам нужно изменить API, чтобы принимать «multipart / form-data».тогда только вы можете загружать изображения.

это метод, который нужно сделать

const frmData = new FormData(); frmData.append("name", "name"); frmData.append("file","imageUrl");

const httpHeaders = new HttpHeaders({ "enctype": "multipart/form-data" });

const options = { headers: httpHeaders };

return this.http.post<string>( "/URL", frmData, options);