Как сделать POST-запрос с Angular на Flask сервер

Question

Я работаю над приложением, которое требует от меня загрузки CSV-файлов на сервер FLASK с внешнего интерфейса Angular. У меня трудности с этим. Как я могу подключить angular интерфейс к бэкэнд-серверу flask.

Вот мой компонент. html

<div [hidden] = "submitted">
<form (ngSubmite) = "onSubmit()" action = "http://localhost:5000" method = "post" enctype="multipart/form-data">  
    <input type="file" name="file" />  
    <input type = "submit" value="Upload">  
</form>  

Вот мой component.ts

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

@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})


export class UploadComponent implements OnInit {

submitted = false;

constructor() { }

onSubmit(){
this.submitted = true;

}

ngOnInit() {
}

}

вот мой flask сервер

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/upload' , method = ['GET' ,'POST'])
def upload_File():

if request.method == 'POST':
    #check if the psot request has the file part
    if 'file' not in request.files:
        flash('No file part')
        return redirect(request.url)
    file = request.files['file']
    #if the user does not select file , browser alsos 
    #submite an empty part without filename
    if file.filename == ' ':
        flash('No selected file')

     filename = secure_filename(file.filename)
     file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
     #return render_template('success.html', name = filename) 
    return redirect(request.url)
   return 'File Uploaded'

Answer 1

1. Импорт HttpClientModule в imports. *1004*.
2. Внедрение HttpClient в ваш компонент (переместите эти логики c в службу позже), как это constructor(private readonly http: HttpClient) {}
3. И, наконец, в вашем методе отправки вы можете сделать http-запрос this.http.post(url, body).subscribe()