1
votes

Comment utiliser la méthode POST pour envoyer des données de formulaire dans Angular?

J'ai une API backend qui accepte une méthode POST avec une image form-data, comme celle-ci,

Lorsque vous utilisez Postman comme ci-dessus, tout fonctionne bien. Mais quand je veux faire cela dans Angular, cela ne fonctionne pas.

@main.route("/image/identification", methods=['POST'])
@login_required
def identification():
    image_file = request.files.get('image', default=None)
    if image_file:
        picture_fn = save_picture(image_file, 2)
        return identif(picture_fn)
    else:
        return jsonify({'code':0, 'message':'image file error!'})

// My service file (using HttpClient):
const rootUrl = 'https://...../api';

public recognizeFish(image: File): Promise<any> {
  return new Promise((resolve, reject) => {

    const formData = new FormData();
    formData.append('image', image);

    this.post('/image/identification', formData)
      .toPromise()
      .then(res => {
        if (res['code'] === 0) {
          console.log('=====================================');
          console.log('Recognition failed, cause = ', res);
          console.log('=====================================');
        } else {
          console.log('=====================================');
          console.log('Recognition succeeded, res = ', res);
          console.log('=====================================');
        }
        resolve();
      })
      .catch(cause => {
        console.log('=====================================');
        console.log('Recognition failed, cause = ', cause);
        console.log('=====================================');
        reject();
      });
    ;
  });
}

private getOptions(headers?: HttpHeaders, params?): HttpHeaders {
  if (!headers) {
    headers = new HttpHeaders().append('Content-Type', 'application/x-www-form-urlencoded');
  }
  return headers;
}

post(route: string, body: any, headers?: HttpHeaders): Observable<any> {
  headers = this.getOptions(headers);
  return this.http.post(rootUrl + route, body, {headers});
}

import {Component, OnInit} from '@angular/core';
import {MyDearFishService} from '../../my-dear-fish.service';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {

  constructor(public service: MyDearFishService) {
  }

  ngOnInit() {
  }

  arrayOne(n: number): any[] {
    return Array(n);
  }

  handleInputEvent($event) {

    const image = $event.target.files[0];
    this.service.recognizeFish(image);
  }

}

Le développeur backend ( qui a développé le back-end en utilisant Flask) me donne ce code:

<!-- html template file -->
<input type="file" (change)="handleInputEvent($event)"/>

Et il m'a aussi dit que lorsque la propriété "code" dans la réponse est 0, cela signifie erreur , quand il vaut 1, cela signifie aucune erreur. Lorsque je teste mon application Angular dans le navigateur, j'ai cette erreur:

angular form-data

0 commentaires

3 Réponses :

0
votes

Vous envoyez les données dans le bon paramètre de la demande de publication (corps) mais le problème est que votre objet n'est pas analysé comme le format correct (dans ce cas 'FormData') pour cela, vous devez déclarer un nouveau instance de FormData et ajoutez l'image à l'intérieur.

 handleInputEvent($event) {
     const image = $event.target.files[0];
     const formData = new FormData();
     formData.append('image', image );
     this.service.recognizeFish(formData);
}

1 commentaires

Il renvoie une erreur de requête HTTP ou votre requête ne s'exécute même pas? Si ne s'exécute pas, ajoutez simplement à this.service.recognizeFish (formData) .subscribe ();

0
votes

Transmettez FormData directement à votre méthode post .

  public recognizeFish(image: File): Promise<any> {
    return new Promise((resolve, reject) => {

      let formData = new FormData();
      formData.append('image', image);

      this.post('/image/identification', formData)
        .toPromise()
        .then(res => {
          console.log('Recognition okay, res = ', res);
          resolve();
        })
        .catch(cause => {
          console.log('Recognition failed, cause = ', cause);
          reject();
        });
    });
  }

0 commentaires

3
votes

Lorsque je télécharge une image en utilisant angular, je fais ceci:

this.post('/image/identification', {files: {image: image}})
        .toPromise()....

et cela fonctionne très bien. Donc, je pense que le problème dans votre code est que vous ne transmettez pas le formData à votre méthode de publication ici:

public uploadImage (img: File): Observable<any> {
    const form = new FormData;

    form.append('image', img);

    return this.http.post(`${URL_API}/api/imagem/upload`, form);

  }

Essayez de faire comme je l'ai fait et faites-moi savoir si Ça marche. Bonne chance.

5 commentaires

En fait, même lorsque j'ai passé formData comme deuxième paramètre à la méthode, cela ne fonctionne pas non plus.

Ne passez pas les en-têtes, juste l'url et le formData à http. Cela devrait résoudre votre problème

Je ne sais pas vraiment pourquoi, mais cela a résolu mon problème! Merci beaucoup.

@ AndréPacheco que faire si j'ai une image ainsi qu'une autre valeur clé.