Java：无法将包含类型文件输入的Angular 5表单发送到REST后端（Spring Boot）

Question

i am working in a project in school, backend is a REST based on Spring Boot,
Frontend is an Angular 5 application. i have red a lot of tutorials but i cannot
find the right answer for my question:
-How can i post a form that contain an input of type file and others input of type text
-i want to send a form that contain a picture to backend, after that i want to take the file, rename it with unique name and upload it to a folder and put the URL in the DataBase
-i Have this Error in Backend :
Unexpected character ('-' (code 45)) in numeric value: expected digit (0-9) to follow minus sign, for valid numeric value

Here is the Entity:

@Entity
public class Prestataires implements Serializable {

  @Id @GeneratedValue
  private Long id;
  private String nom;
  private String email;
  private String tele;
  private String fax;
  private String rib;
  private String adresse;
  private String taches;
  private String photo;
  private File file;

//-------------------Constructors--------------------

//-------------------Getters and Setters-------------

}

Here is the RestController Class :

package smart.syndic.web;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import smart.syndic.dao.PrestatairesRepository;
import smart.syndic.entities.Prestataires;

@RestController
@CrossOrigin("*")
public class PrestatairesRestController {
  @Autowired
  private PrestatairesRepository repository;

  @RequestMapping(value="/prestataires", 
          method=RequestMethod.POST)
  public Prestataires addPrestataires(
            @RequestBody Prestataires v) {
    /*
    Here will be the code to process the file coming from front End and
    uploading it to folder then put the URL to DataBase
    */
    return repository.save(v);
  }
}

Here is the front end App:

<form class="form-horizontal form-label-left" #f1="ngForm">
            <div id="containerAjouterPrestataires">

            </div>
            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Raison Social/Nom<span class="required">*</span>
              </label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input [(ngModel)]="nom" name="nom" type="text" required class="form-control col-md-7 col-xs-12">
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Email<span class="required">*</span>
              </label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input [(ngModel)]="email" name="email" type="email" required class="form-control col-md-7 col-xs-12">
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Téléphone<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input [(ngModel)]="tele" name="tele" class="form-control col-md-7 col-xs-12" type="text" required>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Fax<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input [(ngModel)]="fax" name="fax" class="form-control col-md-7 col-xs-12" type="text" required>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">RIB<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input [(ngModel)]="rib" name="rib" class="form-control col-md-7 col-xs-12" type="text" required>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Type<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">

                <div class="input-group">
                  <select class="form-control" name="selectTypes" [(ngModel)]="selectTypes">
                    <option selected="selected" *ngFor="let s of tousLesPrestatairesTypes" [value]="s.id" >
                      {{s.designation}}
                    </option>
                  </select>
                  <span class="input-group-btn">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
                      Ajouter Type
                    </button>
                  </span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Adresse<span class="required">*</span>
              </label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <textarea [(ngModel)]="adresse" name="adresse" class="form-control" rows="3" placeholder="Adresse"></textarea>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Tâches<span class="required">*</span>
              </label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <textarea [(ngModel)]="taches" name="taches" class="form-control" rows="3" placeholder="Tâches"></textarea>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12">Photo/Logo<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <input name="photo" class="form-control col-md-7 col-xs-12"
                       type="file" required="required" accept="image/*"
                        (change)="handleFileInput($event)">
              </div>
            </div>

<div class="form-group">
              <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                <button class="btn btn-warning" type="reset">Vider</button>
                <button type="button" class="btn btn-success" (click)="ajouterPrestataires()">Ajouter</button>
              </div>
            </div>



          </form>

Here is the TypeScript Controller:

import { Component, OnInit } from '@angular/core';
import {PrestatairesService} from "../../services/prestataires.service";
import {PrestatairesTypeModel} from "../../modeles/prestatairesType.model";
import {PrestatairesModel} from "../../modeles/prestataires.model";

@Component({
selector: 'app-ajouter-prestataires',
templateUrl: './ajouter-prestataires.component.html',
styleUrls: ['./ajouter-prestataires.component.css']
})
export class AjouterPrestatairesComponent implements OnInit {

nom:any;
email:any;
tele:any;
fax:any;
rib:any;
adresse:any;
taches:any;
photo:any;

selectTypes:any;

typePrestataire:any;

tousLesPrestatairesTypes:any;

modelType:any;

imageURL:string = "../assets/images/MeG.jpg";

fileToUpload:File = null;

modelPrestataires:any;


constructor(private service:PrestatairesService) { }

ngOnInit()
{
   this.getAllTypes();
}

handleFileInput(file:any)
{
  this.fileToUpload = <File>file.target.files[0];

}

ajouterPrestataires()
{

  this.modelPrestataires = new PrestatairesModel();
  this.modelPrestataires.nom = this.nom;
  this.modelPrestataires.email = this.email;
  this.modelPrestataires.tele = this.tele;
  this.modelPrestataires.fax = this.fax;
  this.modelPrestataires.rib = this.rib;
  this.modelPrestataires.adresse = this.adresse;
  this.modelPrestataires.taches = this.taches;
  this.modelPrestataires.file = this.fileToUpload;
  this.modelPrestataires.photo = this.photo;

  this.getOneType(this.selectTypes);
  this.modelPrestataires.prestatairesTypes = this.modelType;

  this.service.uploadFile(this.modelPrestataires)
    .subscribe(data=>{


console.log("Success");

    }, err=>{


console.log("Error");

    }, ()=>{

    });

    }

Here is the service :

import {Injectable} from "@angular/core";
import {HttpClient, HttpEvent, HttpHeaders, HttpParams, HttpRequest} from 
"@angular/common/http";

@Injectable()
export class PrestatairesService
{
 host:string = "http://localhost:8080/";
   constructor(private http:HttpClient)
 {

 }
 uploadFile(model:any){

 let formData = new FormData();

  formData.append('fichier', model.file);

  let headers = new HttpHeaders().set('Content-Type','application/json');


  let params = new HttpParams();
  const options = {
  params: params,
  reportProgress: true,
  headers: headers
 };

 const req = new HttpRequest('POST', this.host + "prestataires", formData, 
 options);
 return this.http.request(req);
 }
 }

Answer 1

When uploading the file to the backend you can use Multipart file. You could also Base64 encode the file in the frontend and send it as a JSON string, but that causes a lot more bytes being sent over the wire.

In the multipart solution your controller should expect a multipart file like so.

Controller

@RestController
@CrossOrigin("*")
public class PrestatairesRestController {
  @Autowired
  private PrestatairesRepository repository;

  @RequestMapping(value="/prestataires", method=RequestMethod.POST)
  // you don't have to add @RequestBody for the Prestataires
  public String postFileUpload(Prestataires prestataires, @RequestParam("multipartFile") MultipartFile file) {
    // Make sure that in the frontend the name of the form field for the file is also multipartFile
   // Also make sure that the mime type in the frontend is multipart/form-data

    byte[] rawFile;

    try {
      rawFile = file.getBytes();
    } catch (IOException e) {
      e.printStackTrace();
      return "error?";
    }

    prestataires.setFile(rawFile);

    prestatairesRepository.save(prestataires);

    return "redirect:/ or send response";
  }

}

Your entity can't just have a File class as field. You need to have a byte[] ; you will ultimately be storing raw bytes in your database - I think other datatypes are also allowed.

Entity

@Entity
public class Prestataires implements Serializable {

  @Id @GeneratedValue
  private Long id;
  private String nom;
  private String email;
  private String tele;
  private String fax;
  private String rib;
  private String adresse;
  private String taches;
  private String photo;

  @Lob
  @Column(name = "file", columnDefinition="BLOB")
  private byte[] file;

  //-------------------Constructors--------------------

  //-------------------Getters and Setters-------------

}

For the Angular part I suppose this is a perfect example of what you need to upload files: https://stackoverflow.com/a/40216616/5473627