AsyncWebServerRequest Récupération des données FormData (clé/valeur)

Version imprimable

Bonjour à tous
Mon client renvoit les données d'un formulaire de saisie par cette routine:

Code:

prgServeur("/CapteurPost");

Code:

1
2
3
4
5
6
7
8
9
10
function prgServeur(url) {
    fetch(url, {
        method: 'POST',
        headers: {'Content-Type' : 'multipart/form-data'},
        body: new FormData(document.getElementById('formulaire'))
     })
        .then(response => response.ok ? response.text() : Promise.reject("Reponse non valide"))
        .then(data => console.log("Reponse: ", data))
        .catch(error => alert("Erreur1: " , error))
}

Quelle méthode dois-je utiliser pour récupérer mes données côté serveur ESP32?

Salut,

Tu as dû déjà le faire il me semble, avec un écouteur sur l'url :
Code:

1 2 3 4 5 server.on("/CapteurPost", HTTP_POST, [](AsyncWebServerRequest *request){ // traitement des données en paramètre });

03/11/2024, 17h06
mormic

bonjour, merci pour ton aide,
oui j'ai déjà traité un post mais c'était avec un flux de données à la queue leuleu.
Là c'est un FormData (clé/valeur, style JSON) et je ne sais pas comment récupérer les éléments.
03/11/2024, 17h16
f-leb

La bibliothèque arduinoJson est pas mal pour traiter du json.

merci mais ce n'est pas un fichier JSON que j'envoie; c'est un FormData constitué de paires 'name' / 'value' d'éléments HTML.
Il y a des quantités d'infos sur la façon de créer cette entité FormData du côté client, mais rien du côté serveur: comment retrouver mes paires de données?
Une méthode précédemment concluante avec un flux de données renvoie "Erreur1" systématiquement:

Code:

serveur.on("/CapteurPost", HTTP_POST, reponseCaptRecep, nullptr, gestionReception);

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//****Gestion de la réception des POST******************
void gestionReception(AsyncWebServerRequest *req, uint8_t *data, size_t len, size_t index, size_t total) {
  afficInfo(MSG15);
  if(index==0){
    bodyPret = false;
  }
  if(total >=tailleMaxBody) afficErreurs(MSG14);    //body too big
  else{
    memcpy(bufBody + index,data,len);
    if(index + len >= total){
      bufBody[total] = '\0';
      bodyPret=true;
    }
  }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
//****Analyse de la réception du POST de la programmation des capteurs**************
void reponseCaptRecep(AsyncWebServerRequest *req) {
  if(bodyPret){
    afficInfo(MSG15);
    int nbParams = req->params();
    for(i=0;i<nbParams;i++){
      const AsyncWebParameter* p = req->getParam(i);
      sprintf(bufBody,"POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
      afficInfo(bufBody);
    } 
    req->send(200,"Content-type: text/plain", "Ok");
  }    
  else  req->send(413,"Content-type: text/plain", "NOk");

Le premier affichage MSG15 de la gestionReception() ne s'affiche jamais.
J'ai légèrement modifié le POST côté client ainsi:

Code:

1
2
3
4
5
6
7
8
9
10
11
//************************envoi de la saisie**********************************************
function prgServeur(url) {
    const formData = new FormData(document.querySelector('#formulaire'))
    fetch(url, {
        method: 'POST',
        body: formData
    })
        .then(response => response.ok ? response.text() : Promise.reject("Reponse non valide"))
        .then(data => console.log("Reponse: ", data))
        .catch(error => alert("Erreur1: " , error));   
}

Mais cela n'a rien changé.

regardez la doc sur "get-post-and-file-parameters"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//List all parameters
int params = request->params();
for(int i=0;i<params;i++){
  AsyncWebParameter* p = request->getParam(i);
  if(p->isFile()){ //p->isPost() is also true
    Serial.printf("FILE[%s]: %s, size: %u\n", p->name().c_str(), p->value().c_str(), p->size());
  } else if(p->isPost()){
    Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
  } else {
    Serial.printf("GET[%s]: %s\n", p->name().c_str(), p->value().c_str());
  }
}
 
//Check if GET parameter exists
if(request->hasParam("download"))
  AsyncWebParameter* p = request->getParam("download");
 
//Check if POST (but not File) parameter exists
if(request->hasParam("download", true))
  AsyncWebParameter* p = request->getParam("download", true);
 
//Check if FILE was uploaded
if(request->hasParam("download", true, true))
  AsyncWebParameter* p = request->getParam("download", true, true);
 
//List all parameters (Compatibility)
int args = request->args();
for(int i=0;i<args;i++){
  Serial.printf("ARG[%s]: %s\n", request->argName(i).c_str(), request->arg(i).c_str());
}
 
//Check if parameter exists (Compatibility)
if(request->hasArg("download"))
  String arg = request->arg("download");

Merci Jay M mais cette doc est sur ma table de chevet et je m'en suis inspiré; si vous regardez le fil N°5 c'est exactement ce que j'ai écrit, mis à part le fait que le Serial.printf ne me convient pas et que je l'ai remplacé par un sprintf pour l'afficher sur mon LCD:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 void reponseCaptRecep(AsyncWebServerRequest *req) { if(bodyPret){ req->send(200,"Content-type: text/plain", "Ok"); int nbParams = req->params(); for(i=0;i<nbParams;i++){ const AsyncWebParameter* p = req->getParam(i); sprintf(bufBody,"POST[%s]: %s\n", p->name().c_str(), p->value().c_str()); afficInfo(bufBody); } } else req->send(413,"Content-type: text/plain", "NOk"); }
Ce que je ne comprends pas, pourquoi le client affiche "Erreur1: " en retour catch du fetch POST.

05/11/2024, 08h56
Jay M

Pouvez vous afficher la requête reçue ?
05/11/2024, 09h28
mormic

non je ne peux pas, rien ne s'affiche comme si le body n'était pas prêt.
05/11/2024, 13h45
Jay M

pouvez vous regarder la console de votre navigateur et faire afficher ce qui est vraiment envoyé ?

2 pièce(s) jointe(s)

visualisation des données voulant être envoyées

Oui en effet ça ne va pas fort.
Mais pourquoi? Le CORS bloque, mais que faire? cela dépasse mes faibles compétences.

J'ai modifié pour visualiser les données:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function prgServeur(url) {
    const formData = new FormData(document.querySelector('#formulaire'));
    for(let pair of formData.entries()){
        console.log(pair[0] + ', ' + pair[1]);
    }
    fetch(url, {
 
        method: 'POST',
        headers: {'content_type' : 'multipart/form-data'},
        body: formData
    })
        .then(response => response.ok ? response.text() : Promise.reject("Reponse non valide"))
        .then(data => alert("Reponse: ", data))
        .catch(error => alert("Erreur1: " , error));   
}

Ce qui donne sur la console de Chrome:

Pièce jointe 661385

06/11/2024, 15h29
mormic

1 pièce(s) jointe(s)

Je crois avoir trouver une partie du problème:
dans le headers je mettais:

Code:

headers: {'Content_Type' : 'multipart/form-data'}

alors que j'aurais du mettre:

Code:

headers: {'Content-Type' : 'multipart/form-data'}

une stupide erreur de tiret!
Cela ne fonctionne toujours pas mais la situation semble meilleure.
La console m'indique maintenant:
Pièce jointe 661412

Donc le serveur reçoit bien le message mais surement parceque bodyPret est false renvoit le code 413.

Bonjour à mes correspondants
N'ayant pas trouver de solution fonctionnelle, j'ai modifié l'envoi des données côté client ainsi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function prgServeur(url) {
    const formData = new FormData(document.querySelector('#formulaire'));
    let m='mem'+ ':'+ actionServeur + ';';
    for(let pair of formData.entries()){
        m += pair[0] + ':' + pair[1] + ';';   
    }
    m += 'Z:Z;';
    alert(m);
 
    fetch(url, {       
        method: 'POST',
        headers: {'Content-Type' : 'text/plain' },  //'multipart/form-data'
        body: "m"
    })
        .then(response => response.ok ? response.text() : Promise.reject("Reponse non valide"))
        .then(data => alert("Reponse: ", data))
        .catch(error => alert("Erreur1: " , error));   
}

Comme vous pouvez le remarquer, pour envoyer en text/plain, j'ai formaté les données en séparant les paires par un ';' et séparé clé/valeur par ':' afin de "faciliter" le décodage côté serveur.
Et comme à l'habitude, ça coince.
Côté serveur(ESP32] ma routine de décodage:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
void analyseCaptRecep(AsyncWebServerRequest *req){
  if(bodyPret){
    afficInfo(MSG15);    //body received 
    char buf[20];   
    req->send(200,"Content-Type: text/plain", "Ok");
    const char * separateurs = ":;";
    char *mot = strtok(bufBody, separateurs);
    while(mot != NULL){
      sprintf(buf,"%s",mot);
      afficInfo(buf);
      mot = strtok(NULL,separateurs);
    }
  }   
  else  req->send(413,"Content-type: text/plain", "NOk");    
}

Au lieu d'afficher les mots un par un, il n'y a qu'une lettre qui s'affiche ('m') puis l'ESP se plante et se réinitialise.
C'est peut-être avec la commande C qu'il y a un pb?

07/11/2024, 18h02
edgarjacobs

Hello,

1) peux-tu montrer la déclaration de bufBody ?

2) le sprintf() ligne 9 n'est pas nécessaire, remplace-le par strncpy(buf, mot, sizeof(buf));. De cette manière, tu seras sûr de ne pas dépasser la taille de buf.

1 pièce(s) jointe(s)

1)
Code:

1 2 const size_t tailleMaxBody = 250; char bufBody[tailleMaxBody];
2)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 void analyseCaptRecep(AsyncWebServerRequest *req){ if(bodyPret){ afficInfo(MSG15); //body received char buf[15]; const char* separateurs = ":;"; char* mot = strtok(bufBody, separateurs); while(mot != NULL){ strncpy(buf,mot,sizeof(buf)); afficInfo(buf); //void afficInfo(const char *msg) mot = strtok(NULL,separateurs); } req->send(200,"text/plain", "Ok"); } else req->send(413,"text/plain", "NOk"); }
Ne faut-il pas mettre sizeof(mot) plutôt que sizeof(buf) ?

J'ai bien le message "body received" mais après l'afficheur montre des signes cabalistiques puis l'ESP32 se réinitialise.
le message envoyé est maintemant ainsi:
Pièce jointe 661470

Merci de l'intérêt que tu portes à mon problème. Je commence vraiment à être dépité.

1 pièce(s) jointe(s)

Re,-

Je suppose que dans l'encardé, c'est le contenu de bufBody. Si c'est le cas, cette partie du programme est correcte. En plus court:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 #include <stdio.h> #include <string.h> #define SEPARATOR ";:" void DisplayTokens(char *str) { char *tok=strtok(str, SEPARATOR); while(*tok) { // FAUX ! c'est while(tok) qu'il faut écrire. Désolé pour l'erreur. Edit 08.11 printf("|%s|\n", tok); tok=strtok(NULL, SEPARATOR); } } int main(void) { char buf[]="mem:B;manipuNum:2;carteNum:3;capt:3;commandeM:B;relDisM:;equipeNumM:2;RcommandeM:\nT;partMVal:8;seuiMVal:15;commandeP:B;relDisP:;equipeNumP:2;RcommandP:T;ParVal:\n8;seuilPVal:85;Z:Z;"; DisplayTokens(buf); return(0); }
Exécuté, donne en sortie

Pièce jointe 661474

J'ai inséré deux passages à la ligne car tu montres quatre lignes en sortie.

Néanmoins, je ne suis pas certain que strtok() soit la fonction dont tu as besoin: si elle trouve une séquence :;, elle ne donne pas un string vide pour ce qui se trouve entre le : et le ;

Citation:

Je suppose que dans l'encardé, c'est le contenu de bufBody.

Cet encadré est l'affichage côté client (par alert() Javascript) du message qui est envoyé.
Du côté serveur, c'est justement mon problème, je ne sais pas comment afficher mes données.
J'ai trouvé cette fonction strtok() qui semblait convenir, mais si tu as une autre idée?

Citation:

si elle trouve une séquence :;, elle ne donne pas un string vide

Oui, j'avais vu ce problème et envisagé de préremplir les champs qui peuvent rester vide par un 'Z' .
Code:

1 2 3 4 for(let pair of formData.entries()){ if(pair[1]=='') pair[1]='Z'; m += pair[0] + ':' + pair[1] + ';'; }
Je viens aussi de modifier côté serveur la routine de lecture:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 oid analyseCaptRecep(AsyncWebServerRequest *req){ if(bodyPret){ afficInfo(MSG15); //body received char buf[15]; const char* separateurs = ":;"; char* mot = strtok(bufBody, separateurs); while(*mot){ sprintf(buf,"|%s|",mot); afficInfo(buf); //void afficInfo(const char *msg) mot = strtok(NULL,separateurs); } req->send(200,"text/plain", "Ok"); } else req->send(413,"text/plain", "NOk"); }
Ma fonction afficInfo(buf) doit afficher sur LCD 2x16 char pendant 2 secondes, sur la ligne 0: 'Information', sur la ligne 1: le contenu du buf.
Or, une seule fois,j 'ai eu un affichage: ligne 0: (vide), ligne 1: |mem|
puis des signes cabalistiques sur les deux lignes, puis plantage.

Si je peux me permettre Edgar de te rappeler mon problème original:
1) j'ai un formulaire HTML avec des champs affectés d'un 'name'.
2) ce formulaire doit être envoyer vers le serveur par un POST, les données étant codées en FormData (clé/valeur). (voir fil#11)
3) les données doivent être récupérées côté serveur (ESP32), analysées et faire exécuter les fonctions prévues.

Le point 2 ne semblait pas fonctionner et personne n'a pu m'apporter une raison; aussi pour avancer, j'ai modifié le formatage pour envoyer en text/Plain tel qu'il est aujourd'hui.
Les données partent bien, mais au point 3, cela se passe plutôt mal.

08/11/2024, 17h47
edgarjacobs

Citation:

Ne faut-il pas mettre sizeof(mot) plutôt que sizeof(buf) ?

Non, c'est buf le destinataire, c'est donc sa capacité qui limite la copie.

--------------------------------------------------------

Citation:

Ligne 8:

Code:

sprintf(buf,"|%s|",mot);

Prends l'habitude d'utiliser les fonctions sécurisées: snprintf(buf, sizeof(buf), "|%s|", mot); et strncpy(buf, mot, sizeof(buf));, ça peut t'éviter pas mal d'emm....

-------------------------------------------------------

Du côté serveur, aurais-tu la possibilté de faire un affichage console de bufBody ? Ça pourrait fortement aider.

-------------------------------------------------------

Citation:

1) j'ai un formulaire HTML avec des champs affectés d'un 'name'.
2) ce formulaire doit être envoyer vers le serveur par un POST, les données étant codées en FormData (clé/valeur).

Je n'ai qu'une connaissance très basique du HTML.

Edit: orthographe

Nouvel edit important: ce n'est pas while(*mot), mais while(mot) ! Ça pourrait expliquer le plantage. Désolé d'avoir aussi commis l'erreur :oops:

1 pièce(s) jointe(s)

Citation:

Nouvel edit important: ce n'est pas while(*mot), mais while(mot) ! Ça pourrait expliquer le plantage. Désolé d'avoir aussi commis l'erreur

J'ai fait la correction et appliqué tes conseils concernant snprintf. Toujours pareil.
J'ai essayé de sortir l'affichage de la boucle while en stockant les pointers dans un tableau et en affichant par une autre boucle:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 void analyseCaptRecep(AsyncWebServerRequest *req){ if(bodyPret){ afficInfo(MSG15); //body received char buf0[20]; char* buf[100]; const char* separateurs = ":;"; char* mot = strtok(bufBody, separateurs); i=0; while(mot){ mot = strtok(NULL,separateurs); buf[i]=mot; i++; } req->send(200,"text/plain", "Ok"); for(uint8_t j=0; j<i;j++){ snprintf(buf0,sizeof(buf0),"|%s|",buf[j]); afficInfo(buf0); } } else req->send(413,"text/plain", "NOk"); }
Afichage de '|B|' puis plantage.

Citation:

Du côté serveur, aurais-tu la possibilté de faire un affichage console de bufBody ? Ça pourrait fortement aider.

C'est bien là mon malheur. Impossible car l'ESP32 est installé dans son montage électronique qui est alimenté. Le fait de brancher la liaison série empêche le bon fonctionnement.
Ci-après le synoptique du système:Pièce jointe 661517
Le chargement de l'ESP32 se fait par OTA.

Afin de pouvoir avancer, je me propose de faire une maquette toute simple connectée en liaison série pour avoir une visue console du PC.
Bien que non résolu, je vais fermer ce Fil; j'en ouvrirai un nouveau lorsque ma maquette sera opérationnelle.
Je remercie tous les participants à ce fil, votre aide est tant précieuse.
Michel

10/11/2024, 01h23
edgarjacobs

Citation:

J'ai essayé de sortir l'affichage de la boucle while en stockant les pointers dans un tableau et en affichant par une autre boucle

Cela ne sert à rien, sinon à consommer de la mémoire pour des prunes.

Citation:

.... je vais fermer ce Fil; j'en ouvrirai un nouveau lorsque ma maquette sera opérationnelle

Ok. Les convoyeurs attendent (mais qui se souvient encore de ça ?).