Загрузить файл и строку через API с загрузкой Spring и Angular или Reactjs методом post

Question

Я пытаюсь что-то сделать, но через неделю все еще есть проблемы.Я проверил все предложенные способы, но пока безуспешно.пожалуйста, дайте мне знать, если есть какая-либо часть, чтобы найти правильное решение для этой конкретной проблемы, или был бы благодарен, если вы дадите мне свои идеи.

У меня есть загрузочный проект Spring на сервере, который имеет эту часть для получениязапрос через метод Post:

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 {  

    @RequestMapping(method = RequestMethod.POST, value = "/getId")
    @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;
    }
}

Отлично работает с почтальоном.Но когда я сделал на стороне клиента либо ReactJs, либо Angular, я не получил никакого ответа из этого кода.в то время как в почтальоне у меня есть.

это код ReactJs, который имеет проблему (я задавал вопрос для этого отдельно здесь ) для получения данных сервером (сервер может получить Id, но файлпусто), а также НЕТ ОТВЕТА на получение от сервера к этой клиентской части:

import React, {Component} from 'react';
import img from "./images/test.jpg"
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'; 


class DoPost extends Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
            id: null,
            fileData: null,
            url: "http://localhost:8990/getId"
        };
    } 

    handleSubmit(event) {
        event.preventDefault();
        let formData = new FormData();
        formData.append('id', this.id.value);
        formData.append('inputPackage', this.inputPackage.value); 
        console.log(this.id.value);
        console.log(this.inputPackage.value);
        console.log(formData.getAll("inputPackage"));

        fetch(this.state.url, {
            mode: 'no-cors',
            method: 'post',
            body: formData
        }) .then( res => {
                alert(res);
            })


    }


    render() {

        return (<div>
                <section className="login-block">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-4 login-sec">
                                <form onSubmit={this.handleSubmit}>
                                    <label htmlFor="id">MaterialFlow Id:</label>
                                    <input type="text" name="id" id="id"
                                           ref={el => this.id = el}/><br/><br/>
                                    <div className="form-group files color">
                                        <label>Upload Your File </label>
                                        <input type="file" name="inputPackage" ref={el => this.inputPackage = el}
                                               required
                                               className="file-controller"/>
                                    </div>
                                    <div className="align-center">
                                        <input type="submit" className="btn btn-lg btn-info " value="Send the request"/>
                                    </div>
                                </form>
                            </div>
                            <div className="col-md-8 banner-sec">
                                <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                    <div className="carousel-inner" role="listbox">
                                        <div className="carousel-item">
                                            <img className="d-block img-fluid" src={img} alt="First slide"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
}

export default DoPost;

, и это Angular, который имеет ту же проблему в Не получает ответ , а такжепроблема в том, что когда я помещаю пост-вызов в функцию "insertFile", он отправляет данные правильно, но когда я помещаю его в "onSubmit", он ничего не отправляет:

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    private http: HttpClient
  ) { }
  fileToUpload: File = null;
  id = null;
  insertFile(event) {



    this.fileToUpload = event.target.files[0];
    console.log('File path -- > ' + event.target.files[0].name );

    // WORKS FINE IF I PUT HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!       
    --------- vvvvv
    const frmData = new FormData();
    console.log('POST'); 
    // @ts-ignore
    frmData.append('id', this.id);
    frmData.append('inputPackage', this.fileToUpload); 
    this.http.post(URL, frmData ).subscribe( res => alert(res.toString() ));
    -----------^^^^^^

  }
  insertId(event) {
    console.log('Id -- > ' + event.target.value );
    // alert( event.target.value);
    this.id = event.target.value;
  }

  onSubmit() {
    const frmData = new FormData();



    // NOT WORKING IF I PUT HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    --------- vvvvv
    console.log('POST'); 
    frmData.append('id', this.id);
    frmData.append('inputPackage', this.fileToUpload); 
    this.http.post(URL, frmData ).subscribe( res => alert(res.toString() ));
    -----------^^^^^^

  }
}

единственное, что мне нужно, этопротестировать приложение на любом из этих языков (Spring, angular, реагировать) для клиентской стороны, которое может получить от пользователя один zip-файл и один идентификатор, отправить его в API и получить ответ!

Спасибо ввперед.