如何通过发布请求使用表单组将表单数据发送到Loopback4服务器

Question

我想从angular端向loopback4服务器发送包含json数据和图像的表单数据。此表单包含图像上传。

这是我的html代码：

     <form [formGroup]="userAddForm" (ngSubmit)="onSubmit(userAddForm.value)">
      <div class="form-group row">
        <label class="col-md-3 col-form-label">User Name</label>
        <div class="col-md-9  txt-box">
          <input formControlName="name" type="text" class="form-control" placeholder="Enter user name">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-3 col-form-label">Email id</label>
        <div class="col-md-9 txt-box">
          <input formControlName="email_id" type="text" class="form-control" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-3 col-form-label">Phone No.</label>
        <div class="col-md-9 txt-box">
          <input formControlName="phone_no" type="text" class="form-control" id="inputPhone"
            placeholder="Enter phone no.">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-3 col-form-label">Role</label>
        <div class="col-md-9 txt-box">
          <input formControlName="role" type="text" class="form-control" id="inputRole" placeholder="Assign Role">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-3 col-form-label">Password</label>
        <div class="col-md-9 txt-box">
          <input formControlName="password" type="text" class="form-control" 
     id="inputPassword"
            placeholder="Enter password">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-3 col-form-label">Confirm </label>
        <div class="col-md-9 txt-box">
          <input formControlName="confirm_password" type="text" class="form-control" 
     id="inputCPassword"
            placeholder="Enter password">
        </div>
      </div>
      <div class="form-group">

        <div class="col-md-9 txt-box">
          <img *ngFor="let url of urls" [src]="url" class="rounded mb-3" width="180">
          <input type="file" formControlName="image" (change)="createFormData($event)">
        </div>
      </div>
      <div class="form-group row">
        <div class=" col-md-9">
          <!-- <a class="a-btns btn btn-success">Submit</a> -->
          <button type="submit" class="a-btns btn btn-success tab-btn">
            Submit</button>

        </div>
      </div>
    </form>

这是我的ts文件：

我已经创建了user_service以便将发帖请求发送到loopback4服务器。

     ngOnInit() {
this.userAddForm = this.form_builder.group({
  name: [''],
  email_id: [''],
  phone_no: [''],
  role: [''],
  password: [''],
  confirm_password: [''],
image: ['']


  });

  }

 createFormData(event) {
this.selectedFile = <File>event.target.files[0];
this.fd.append('file', this.selectedFile, this.selectedFile.name);
this.urls = [];
let files = event.target.files;
if (files) {
  for (let file of files) {
    let reader = new FileReader();
    reader.onload = (e: any) => {
      this.urls.push(e.target.result);
    }
    reader.readAsDataURL(file);
  }
   }
   }

  onSubmit(u) {
 console.log(u)
  const formData = new FormData();

   formData.append('image', this.userAddForm.get('image').value);

 formData.append('name', this.userAddForm.get('name').value);
 formData.append('email_id', 
this.userAddForm.get('email_id').value);
 formData.append('phone_no', 
this.userAddForm.get('phone_no').value);
 formData.append('role', this.userAddForm.get('role').value);
  formData.append('password', 
this.userAddForm.get('password').value);
  formData.append('confirm_password', 
this.userAddForm.get('confirm_password').value);
this.user_service.postUser(u).subscribe(
  (data) => {
    console.log(data);
    this.router.navigate(["/dashboard/user/listuser"]);
  },
  err => {console.log(err)}
  )

 }


}

这是我的服务器端代码：

我想将json数据保存在数据库中，并将image保存在名为public的单独文件夹中。

      @post('/show-body', {
responses: {
  200: {
    content: { 'application/json': { schema: 
  getModelSchemaRef(User) } },
    description: '',
  },
},
 })
 async showBody(
   @requestBody({
  description: 'multipart/form-data value.',
  required: true,
  content: {
    'multipart/form-data': {
      // Skip body parsing
      'x-parser': 'stream',
      schema: {type: 'object'},
    },
    },
   })

  request: Request,
  @inject(RestBindings.Http.RESPONSE) response: Response,
  ): Promise<User> {
  const storage = multer.diskStorage({
    destination: (req, file, cb) => {
    // initial upload path
    let destination = path.join(__dirname, '../../public'); // 
   ./uploads/
    destination = path.join(destination);
    console.log('dest', destination)
    cb(
      null,
      destination
    );
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now() + '.' + 
   path.extname(file.originalname));
    console.log(file);
  }
})

  console.log(request)
  const upload = multer({ storage: storage });
  return new Promise<User>((resolve, reject) => {
  upload.any()(request, response, err => {
    if (err) return reject(err);

  });
 });
 }