Обработка оставшегося после ответа в Angular 6 в качестве клиента и Spring в качестве серверного API

Question

У меня есть проблема в моем проекте.Я искал все похожие посты, но не смог найти, где проблема.Буду признателен, если кто-нибудь сможет мне помочь.Я пытаюсь получить ответ на стороне клиента и обработать его, но когда я получаю ответ, он показывает URL-адрес серверной части с необработанным текстом в браузере.Вот мой код Angular (app.component.ts):

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { GetSipIdService } from './app.service';

const URL = 'http://localhost:8990/getId';

@Component({
  selector: 'app-root',
  providers: [ GetSipIdService ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private getSipIdService: GetSipIdService,
  private http: HttpClient
  ) { }



  onSubmit(id: string, file: File) {
    const frmData = new FormData();
    frmData.append('id', id);
    frmData.append('inputPackage', file);
    this.http.post(URL, frmData ).subscribe( res => alert(res.toString() 
  ));

  }
}

, а это HTML-файл:

<section class="login-block">
  <div class="container">
    <div class="row">
      <div class="col-md-4 login-sec">
        <form  >
        <!--<form action="http://localhost:8990/getId" method="POST" enctype="multipart/form-data">-->
          <label for="id">Id:</label>
          <input #id type="text" name="id" id="id" (change)="insertId($event)"  /><br/><br/>
          <div class="form-group files color">
            <label>Upload Your File </label>
            <input #inputPackage type="file" name="inputPackage" (change)="insertFile($event)" required class="file-controller" multiple="">
          </div>
          <div class="align-center">
            <input type="submit" class="btn btn-lg btn-info " value="Send the request" (click)="onSubmit(id.value, inputPackage)"/>
          </div>
        </form>
      </div>
      <div class="col-md-8 banner-sec">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item">
              <img class="d-block img-fluid" src="../images/test.jpg" alt="Test photo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

На стороне сервера у меня есть этот раздел:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;



@Controller
public class GetSipIdController {  

    @CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
    @RequestMapping(method = RequestMethod.POST, value = "/getId", headers = {"content-type=multipart/mixed","content-type=multipart/form-data"})
    @ResponseBody
    String Response(@RequestParam("inputPackage") MultipartFile[] inputPackages, @RequestParam("id") String id) {

        String response = null;

       try {

            if (inputPackages != null && id != null && inputPackages.length > 0 && id.length() > 1) {
                 if (inputPackages[0].getOriginalFilename() != null ) {
                    if( inputPackages[0].getOriginalFilename().contains(".zip")) {
                        System.out.println("Input Package Name : " + inputPackages[0].getOriginalFilename());
                        System.out.println("Input Package Size : " + inputPackages[0].getSize());
                       // save file

                        userId = GetUserId.runProcess(recvPackage, id); 
                        response =  userId ;
                    }else{
                        System.out.println("==============>>>>>>>> The input file : "+ (inputPackages[0].getOriginalFilename())+" is invalid!!\n It should be a zip file!");
                        response = "The input file : "+ (inputPackages[0].getOriginalFilename())+" is invalid!!\n It should be a zip file!";
                    }
                }
            }else{
                System.out.println("==============>>>>>>>> The ID and valid zip file should be provide!");
                response = "The ID and valid zip file should be provide!";
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return response;
    }
}

И это изображение из ответа, оно перенаправляет на URL сервера с необработанным ответом:

введите описание изображения здесь

Answer 1

Я наконец-то понял.Сначала удалите <form> из HTML, затем измените мой Angular на следующее:

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';

const URL = 'http://localhost:8990/getUserId'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
  private http: HttpClient
  ) { }

   fileToUpload: File = null; 
   id: String = '0'; 

   inputId(event) { 
    this.id= event.target.value; 
    console.log('id is -- > ' + event.target.value ); 
   } 
   inputFile(event) {
    this.fileToUpload = event.target.files[0];
    console.log('File path -- > ' + event.target.files[0].name );
  } 
  onSubmit(id: string, file: File) {
    event.preventDefault();
    const frmData = new FormData();
    console.log('POST');
    // @ts-ignore
    frmData.append('id', this.id);
    frmData.append('inputPackage', this.fileToUpload);
    console.log('id --> ' + this.id);
    console.log('File name --> ' + this.fileToUpload.name);
    this.http.post(URL, frmData ).subscribe( res => console.log('--==>> ' + JSON.stringify(res ))); 
  }
}

и измените мой ответ Spring на формат JSON, который облегчает получение из Angular.

used this как класс преобразования.

Answer 2

Пожалуйста, внесите ниже изменения в метод контроллера для работы. Вы отправляете ответ multipart / mixed типа.

    @CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
    @PostMapping(value = "/getId")
    public String Response(@RequestParam("inputPackage") MultipartFile[] inputPackages, @RequestParam("id") String id) {

        String response = null;

        try {

            if (inputPackages != null && id != null && inputPackages.length > 0 && id.length() > 1) {
                if (inputPackages[0].getOriginalFilename() != null ) {
                    if( inputPackages[0].getOriginalFilename().contains(".zip")) {
                        System.out.println("Input Package Name : " + inputPackages[0].getOriginalFilename());
                        System.out.println("Input Package Size : " + inputPackages[0].getSize());
                        // save file

                        userId = GetUserId.runProcess(recvPackage, id);
                        response =  userId ;
                    }else{
                        System.out.println("==============>>>>>>>> The input file : "+ (inputPackages[0].getOriginalFilename())+" is invalid!!\n It should be a zip file!");
                        response = "The input file : "+ (inputPackages[0].getOriginalFilename())+" is invalid!!\n It should be a zip file!";
                    }
                }
            }else{
                System.out.println("==============>>>>>>>> The ID and valid zip file should be provide!");
                response = "The ID and valid zip file should be provide!";
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return response;
    }