1
votes

Image de poste Ionic 3 utilisant des données de formulaire

J'essaie de publier des données de formulaire, consistant en un fichier texte et image sur le serveur PHP. J'utilise une caméra native ionique pour obtenir une photo de la galerie:

var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data;boundary=' + Math.random());
headers.append('Accept', 'application/json');
let options = new RequestOptions({
    headers: headers
});
let formData = new FormData();
formData.append('judul', this.judul.value);
formData.append('photo', this.myphoto, '123.jpg');
this.http.post('http://localhost/upload.php', formData, options)
    .map(...)
    .subscribe(...);

Et la publier en utilisant les données du formulaire:

const options: CameraOptions = {
    quality: 70,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    saveToPhotoAlbum:false,
    targetWidth: 400,
    targetHeight: 400
}

this.camera.getPicture(options).then((imageData) => {
  this.myphoto = normalizeURL(imageData);
  this.myphoto2 = imageData;
}, (err) => {

});

Mais, j'ai vu sur Journal PHP, les données de formulaire non envoyées par ionic. Quel est le problème ici?

php angular ionic3

0 commentaires

3 Réponses :

1
votes

Vous pouvez essayer de supprimer 'options' des arguments this.http.post (). Votre code devient:

this.http.post (' http: //localhost/upload.php ', formData) .carte(...) .subscribe (...);
Si cela ne fonctionne pas, essayez d'envoyer sur toute l'image BASE64 en utilisant

'destinationType: this.camera.DestinationType.DATA_URL'

7 commentaires

J'ai essayé l'option n ° 2, mais il semble que la chaîne base64 soit trop longue, elle génère donc une erreur.

Quelle erreur avez-vous rencontrée, les chaînes de base 64 ne peuvent jamais être trop longues, cela dépend de la taille du fichier? Quel était le poids du fichier?

Le post-processus n'est jamais terminé, suspendu à l'infini et ne renvoie rien.

la première option a-t-elle fonctionné pour vous? Je ne peux pas vraiment vous aider sans messages d'erreur.

Oui, parfois cela fonctionne, mais parfois non. Le message d'erreur est juste une connexion expirée.

stackoverflow.com/ questions / 3829403 /…

ne suggérerait à personne d'utiliser base64 pour publier des images ... cela ajoute 30% de la charge utile d'origine

0
votes

Je vous conseille d'utiliser le plugin natif pour télécharger le fichier:

https://ionicframework.com/docs/native/file-transfer/

0 commentaires

0
votes

Commencez par prendre une photo depuis l'appareil photo

private readFile(file: any) {
    const reader = new FileReader();
    reader.onloadend = () => {
      this.myphoto = new Blob([reader.result], {type: file.type});
      var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data;boundary=' + Math.random());
headers.append('Accept', 'application/json');
let options = new RequestOptions({
    headers: headers
});
let formData = new FormData();
formData.append('judul', this.judul.value);
formData.append('photo', this.myphoto, '123.jpg');
this.http.post('http://localhost/upload.php', formData, options)
    .map(...)
    .subscribe(...);
    };
    reader.readAsArrayBuffer(file);
  }

Ensuite, obtenez une URL d'image système locale

private getSystemURL(imageFileUri: any): void {
    this.file.resolveLocalFilesystemUrl(imageFileUri)
        .then(entry => (entry as FileEntry).file(file => {
          this.readFile(file);
        }))
        .catch(err => console.log(err));
  }

Après avoir lu cette URL d'image

async takePhoto() {
const options: CameraOptions = {
    quality: 70,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    saveToPhotoAlbum:false,
    targetWidth: 400,
    targetHeight: 400
}

this.camera.getPicture(options).then((imageData) => {
  this.getSystemURL(imageData);
}, (err) => {

});
}

Cela fonctionne pour moi, J'espère que cela aidera.

0 commentaires