Ionic2: Übersetzen der Datei-Auswahl-URI in den Dateipfad

Question

Ionic native stellt das Dateiauswahl- und Datei-Plugin separat zur Verfügung. Das Datei-Plugin benötigt den absoluten Pfad der zu lesenden Datei, bietet aber keine Möglichkeit die Datei auszuwählen.

Um die Datei auszuwählen, habe ich Dateiauswahl verwendet, die einen URI zurückgibt.

import { FileChooser } from '@ionic-native/file-chooser'; 

constructor(private fileChooser: FileChooser) { } 

... 

this.fileChooser.open() 
    .then(uri => console.log(uri)) 
    .catch(e => console.log(e)); 

Die uri sieht so etwas wie diese

content://com.android.providers.media.documents/document/image%3A68 

Die Datei Plugin eine Datei durch die Nutzung des Pfades lesen kann.

import { File } from '@ionic-native/file'; 

constructor(private file: File) { } 

... 

this.file.readAsText(this.file.dataDirectory, 'myFile') 
.then((content) => 
     console.log(this.file.dataDirectory + 'myFile'); 
     console.log(content) 
).catch(err => 
     console.log('File doesnt exist') 
); 

Der Pfad sieht so aus.

file:///data/data/com.myapp.myappmobile/files/myFile 

Wie verwende ich beide Komponenten. Wählen Sie eine Datei mit FileChooser und dann lesen Sie es in Ionic 2.

Answer 1

Bitte installieren Sie das FilePath-Plugin, um den nativen Pfad zu erhalten. Verwenden Sie dann den folgenden Code. Sagen Sie zum Beispiel, Sie wählen eine Bilddatei.

nativepath: any; 
uploadfn(){ 
    this.fileChooser.open().then((url) => { 
    (<any>window).FilePath.resolveNativePath(url, (result) => { 
    this.nativepath = result; 
    this.readimage(); 
    } 
) 
}) 
} 

readimage() { 
    (<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => { 
     res.file((resFile) => { 
     var reader = new FileReader(); 
     reader.readAsArrayBuffer(resFile); 
     reader.onloadend = (evt: any) => { 
      var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg'}); 
      //do what you want to do with the file 
     } 
     }) 
    }) 
    } 

hat bitte einen Blick hier - http://tphangout.com/ionic-2-serving-images-with-firebase-storage/

(Behandelt wie ein Bild aus dem Dateisystem des Telefons zu wählen und es auf Feuerbasis Speicher laden)

Hope this Ihnen geholfen. Vielen Dank.

Answer 2

Mit FilePath:

import { File } from '@ionic-native/file'; 
import { FileChooser } from '@ionic-native/file-chooser'; 

constructor(
    private fileChooser: FileChooser, 
    private filePath: FilePath 
) { 

} 

private captureFile(): Promise<any> { 
     return new Promise((resolve, reject) => { 
      this.fileChooser.open().then((uri) => { 

       this.filePath.resolveNativePath(uri) 
        .then((filePath) => { 
         alert(filePath)      
        }, (err) => { 
         reject(err); 
        }) 
      }, (err) => { 
       reject(err); 
      }); 

     }); 

    }