Отправьте образ с разным типом данных из angular 7 в Rest API при весенней загрузке 2.0.5

Question

Я много искал в «переполнении стека» и на других сайтах, без ответа решить мою проблему.

Угловой HTML-файл:

<form (ngSubmit)="submit">
  <div>
    <input type="file" [(ngModel)]="data.image" name="image" (change)="onFileSelected($event)">
  </div>

  <div class="form">
    <mat-form-field>
      <input matInput [(ngModel)]="data.clientName" name="clientName">
    </mat-form-field>
  </div>
  //........ Other inputs fields here//
</form>  

Угловой файл TS:

public confirmAdd(): void {
  const payload: FormData = new FormData();
  payload.append('clientName', this.data.clientName);
  payload.append('dateOfBirth', this.data.dateOfBirth.toString());
  payload.append('mobileNumber', this.data.mobileNumber);
  payload.append('email', this.data.email);
  //...............other fields here ..........//
  payload.append('image', this.selectedFile); == > the image
}    

Файл Angular Service ts:

private httpHeaders = new HttpHeaders({
  'Content- Type': 'multipart/form-data'
});

this.http.post(this.urlEndTestImage, payload {
  headers: this.httpHeaders
}).subscribe(res => {
  console.log(res)
});   

Пружинная загрузка Rest API:

@CrossOrigin(origins = {
  "http://localhost:4200"
})
@RestController
@RequestMapping("/apiHorsesClub")

public class ClienteRestController {

  @PostMapping("/upload")
  public String uploadMultipartFile(@RequestParam("model") String clientNew, @RequestParam(value = "image") MultipartFile image) {
    try {
      ObjectMapper mapper = new ObjectMapper();
      clientEntity client = mapper.readValue(clientNew, clientEntity.class);
      client.setImage(image.getBytes());
      clientService.save(client);
      return "successfully -> filename=" + image.getOriginalFilename();
    } catch (Exception e) {
      return "FAIL!file's size > 500KB";
    }
  }
}    

Я пытаюсь добавить больше @RequestParam(), и я пытаюсь @RequestPart() с тем же именем полей, но не работает.

Это изображение почтальона с просьбой написать:

Answer 1

Вы пропустили , в вашем Service.

   private httpHeaders = new HttpHeaders({'Content- Type':'multipart/form-data'});
       this.http.post(this.urlEndTestImage, payload, { headers:this.httpHeaders })
       .subscribe(
           res => {  console.log(res) } );

Answer 2

Я решил свою проблему, проблему, как вы говорите @Sudarshana, я не сопоставляю «модель» с угловой стороны, и после многочасового поиска я нашел два метода для отправки файла с разностными данными:

1. Отправить (Данные JSON, файл)

   Угловой HTML:

   <form   [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <input type="hidden" name="size" value="1000000">
    <div>
       <input type="file" (change)="onFileSelected($event)">
    </div>
    <div>
      <input type="text" formControlName="clientName" placeholder="client Name">
      <input type="text" formControlName="lastName" placeholder="Last Name">
      <input type="text" formControlName="age"  placeholder="Age">
      <button type="submit" name="upload">POST</button>
    </div>
   </form>
   

   Угловой ts:

   profileForm = new FormGroup({
   clientName : new FormControl(''),
   lastName : new FormControl(''),
   age : new FormControl('')
   });
   
   selectedFile = null;
   public data:clientClass = new clientClass();
   
   onFileSelected(event) {
   this.selectedFile = event.target.files[0];
   console.log(this.selectedFile);
   }
   
   onSubmit() {
   let object = this.profileForm.value;
   const payload = new FormData();
   payload.append("addClient",JSON.stringify(object));
   payload.append("image", this.selectedFile, this.selectedFile.name);
   this.http.post(`http://localhost:8080/yourAPI/uploadTestEntity`,payload, { 
   responseType: 'text'}).subscribe(
     (object) => {
       this.profileForm.reset();
     });
   }
   

   Файл модулей приложения:

   import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   @NgModule({
   imports:[ BrowserModule, FormsModule,ReactiveFormsModule ]
   })
   

   Rest API:

   @PostMapping("/uploadTestEntity")
   public String uploadTestEntity(
   @RequestParam("addClient") String clientNameEntityNew,    
   @RequestParam(value = "image") MultipartFile image) {
     try {
         ObjectMapper mapper = new ObjectMapper();
         testEntity testEntity = mapper.readValue(clientNameEntityNew,testEntity.class);
         testEntity.setImage(image.getBytes());
         TestEntityService.save(testEntity);
       return "File uploaded successfully! -> filename = "+ image.getOriginalFilename();
         } catch (  Exception e) {
     return "FAIL! Maybe You had uploaded the file before or the file's size > 500KB";
   }    
   }
   

   2 - отправка файла и данных в виде параметрови получите в качестве параметров в Rest API:

   Угловой html:

   <form (ngSubmit)="onSubmit()">
    <input type="hidden" name="size" value="1000000">
    <div>
      <input type="file" name="image" (change)="onFileSelected($event)">
    </div>
   <div>
   <input id="textauthor" [(ngModel)]="clientName" name="clientName" placeholder="Name">
   <input id="textauthor" [(ngModel)]="lastName" name="lastName" placeholder="last 
   Name">
   <input id="textauthor" [(ngModel)]="age" name="age" placeholder="age">
   <button type="submit" name="upload">POST</button>
   </div>
   </form>
   

   Угловой ts:

   clientName:string;
   lastName:string;
   age:string;
   resData: any;
   selectedFile = null;
   
   onFileSelected(event) {
   this.selectedFile = event.target.files[0];
   console.log(this.selectedFile);
   
   onSubmit() {
   const payload = new FormData();
   payload.append('clientName', this.clientName);
   payload.append('lastName', this.lastName);
   payload.append('age', this.age);
   payload.append('image', this.selectedFile, this.selectedFile.name);
   
   this.http.post(`http://localhost:8080/apiHorsesClub/uploadTestEntity`,
   payload).subscribe((data: any) => { this.resData = data;console.log(this.resData);
     });
   }
   

   API отдыха:

   @PostMapping("/uploadTestEntity")
   public String uploadTestEntity(
            @RequestParam("clientName") String clientName ,
            @RequestParam("lastName") String lastName
            @RequestParam("age") String age
           ,@RequestParam(value = "image") MultipartFile image) {
     try {
   
         testEntity testEntity = new testEntity();
         testEntity.setImage(image.getBytes());
         testEntity.setClientName(clientName);
         testEntity.setLastName(lastName);
         testEntity.setAge(age);
       return "File uploaded successfully! -> filename = "+ image.getOriginalFilename();
   } catch (  Exception e) {
     return "FAIL! Maybe You had uploaded the file before or the file's size > 500KB";
   }    
   }