wie Bild mit Formulardaten mit ionic angular.js hochladen

Question

Hallo, ich versuche, Bild mit dem Rest der Formulardaten in ionic angular.js für meine mobile Anwendung hochzuladen. Ich benutze das ngCordova Plugin. Aber fand kein Dokument für dieses Verfahren.

Beispiel: Ich habe Anmeldeformular in diesem Formular muss seine Daten eingeben und Profilbild hochladen. Aber als Beispiel kann ich nicht alle Daten in einer Anfrage an den Server senden.

Dank

Answer 1

Try $ cordovaFileTransfer für diesen Einsatz. Die spezifische Implementierung ist hier beschrieben: Upload image to server angularjs

Sie können entweder ein Bild aus dem lokalen Speicher oder ein mit dem Kamera-Plugin aufgenommenes Bild hochladen.

Answer 2

Um das Bild mit Ionic 2 Framework auf den Server zu laden, müssen Sie das Transfer-Plugin verwenden. Installieren Sie Transfer-Plugin

ionic plugin add cordova-plugin-file-transfer npm install --save @ionic-native/transfer

Dann rufen Sie die Upload-Funktion von Übertragungs-Klasse.

const fileTransfer: TransferObject = this.transfer.create(); 

    let options1: FileUploadOptions = { 
    fileKey: 'file', 
    fileName: 'name.jpg', 
    headers: {} 

    } 

fileTransfer.upload(imageDataLocalURL, 'http://localhost/ionic/upload.php', options1) 
.then((data) => { 
// success 
alert("success"); 
}, (err) => { 
// error 
alert("error"+JSON.stringify(err)); 
}); 

den Link Verwenden Sie mehr https://ampersandacademy.com/tutorials/ionic-framework-version-2/upload-an-image-to-the-php-server-using-ionic-2-transfer-and-camera-plugin

aktualisiert am 26-Februar-2018

Für Ionic 3, das File Transfer-Plugin hatte einige Änderungen zu erfahren.

Um File Transfer-Plugin

ionic cordova plugin add cordova-plugin-file-transfer npm install --save @ionic-native/file-transfer

und die Klassen umbenannt Filetransfer von Übertragung in Ionic Version 3.

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

Für eine vollständige Demo finden Sie auf den folgenden Link zu installieren.

https://ampersandacademy.com/tutorials/ionic-framework-3/upload-image-to-the-php-server-using-ionic-3-file-transfer-and-camera-plugin