1
votes

Objet JSON envoyé avec image

J'ai une question de base. Il est possible d'envoyer une méthode POST à ​​deux paramètres dans Angular et Java Spring. L'un des paramètres est l'objet JSON, le second est une image.

J'ai un exemple simple dans Angular pour expliquer ce que je veux:

addHero(file: File,category: CategoryModel): Observable<any> {
const formdata: FormData = new FormData();

formdata.append('file', file);
return this.http.post<File>(this.cateogryUrl, {formdata,category} )
  .pipe(
   // catchError(this.handleError('addHero', file))
  );

}


5 commentaires

Vous voulez envoyer les données d'Angular vers JAVA comme il semble?


Oui je le veux. Deux paramètres, une image et un objet JSON.


Vous pouvez utiliser base64 pour cela, dois-je vous donner un code de démonstration?


Oui, ce sera utile. Merci.


Vérifiez mon exemple


4 Réponses :


1
votes

Vous pouvez toujours le convertir en BASE64. Ensuite, c'est une simple chaîne que vous pouvez simplement passer dans le JSON (ou un autre).

EDIT

C'est ce que je fais dans mon cas à chaque fois qu'un utilisateur télécharge un fichier. Transformez simplement le fichier choisi en une chaîne BASE64. Il existe de très bonnes ressources à ce sujet.

 const body = JSON.stringify(this.imageUploadModel);

Ceci est mon modèle

export class ImageUploadModel {
  Title: string;
  Description: string;
  ImageType: string;
  Base64String: string;
}

Et je le précise donc je peux l'envoyer sur le corps de la requête:

onFileChanged(event) {
 const file = event.target.files[0];
 if (file.type.split('/')[0] !== 'image') {
  this.validFile = false;
 }
 this.imageUploadModel.ImageType = file.type.split('/')[1];

 const myReader: FileReader = new FileReader();
 myReader.onloadend = (e) => {
   this.imageUploadModel.Base64String = myReader.result.toString();
};
  myReader.readAsDataURL(file);
}


0 commentaires

0
votes
for(let key in someObject){
   formdata.append(key, someObject[key]);
}

0 commentaires

1
votes

Cela dépend de votre backend. S'il prend l'image en tant que fichier multipartite, vous ne pouvez pas envoyer de données JSON avec. Mais vous pouvez ajouter d'autres valeurs souhaitées aux données du formulaire. S'il prend l'image en tant que fichier base64, vous pouvez utiliser l'objet json pour envoyer des données.


6 commentaires

Ceci est mon soutien. @PostMapping ("/ saveCategory") @ResponseStatus (HttpStatus.OK) public void createCategory (@RequestParam ("file") MultipartFile file, @RequestParam ProductModel product) { Et je recherche la meilleure solution. Que pensez-vous de quelle approche est la meilleure?


Si je comprends bien. Je ne peux pas envoyer JSON et Multipart File ensemble?


Oui, vous pouvez le faire de cette manière. Mais lorsque vous faites cela, vous ne pouvez pas envoyer d'objet ProductModel en tant que json. Ses champs doivent être ajoutés à formdata. Je suppose que l'objet ProductModel a un identifiant, un nom, un code et un categoryId. Vos données de formulaire seront comme ça `formdata.append ('file', file); formdata.append ('identifiant', identifiant); formdata.append ('nom', nom); formdata.append ('code', code); formdata.append ('categoryId', categoryId); `


J'ai une réflexion très intéressante. J'ai essayé d'envoyer JSON et Image de POSTMAN et j'ai une erreur car il n'est pas possible de lier String dans mon ProductModel. J'ai l'idée d'envoyer séparément mon identifiant, mon nom au serveur et ensuite le lien dans mon ProductModel. Qu'est ce que tu penses de ça?


C'est votre architecture. Si vous préférez cela, c'est possible. Mais dans ce cas, vous devez penser au scénario de restauration.


Que pensez-vous de définir deux appels, un pour enregistrer l'image sur le serveur et renvoyer l'id de l'image et un autre pour enregistrer les données avec l'id dans la base de données?



1
votes

Bonjour, vous devez suivre ces étapes.

  1. Convertir le fichier en base 64 comme

    function getBase64 (fichier) { retourner une nouvelle promesse ((résoudre, rejeter) => { lecteur const = nouveau FileReader (); reader.readAsDataURL (fichier); reader.onload = () => résoudre (reader.result); reader.onerror = error => rejeter (erreur); }); } getBase64 (fichier) .then (base64 => { var base64 = base64; });

  2. Vous devez maintenant envoyer la base64 avec les données de formulaire comme

    formdata.append ('base64', base64); // base64 de la méthode

  3. Maintenant, récupérez la base64 en JAVA et convertissez-la en fichier à la fin de JAVA.

Merci :) toute question s'il vous plaît commentez vers le bas et merci si vous obtenez votre truc


1 commentaires

Puis-je avoir la coche verte?