2017-04-11 26 views
1

Ionicネイティブは、File ChooserとFileプラグインを個別に提供します。 Fileプラグインでは、ファイルの絶対パスを読み取る必要がありますが、ファイルをとしてに渡すことはできません。Ionic2:File Chooser uriをファイルパスに変換

ファイルを選択するために、URIを返すFile Chooserを使用しました。

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

constructor(private fileChooser: FileChooser) { } 

... 

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

は、URIパスを利用して、ファイルを読むことができる

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

ファイルのプラグインのようになります。

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') 
); 

パスは次のようになります。

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

どのように両方のコンポーネントを利用しますか? FileChooserを使用してファイルを選択し、次にIonic 2でそれを読んでください。

答えて

4

ネイティブパスを取得するためにFilePathプラグインを正しくインストールしてください。 次に、以下のコードを使用してください。 たとえば、画像ファイルを選択しているとします。これはあなたを助けた

希望http://tphangout.com/ionic-2-serving-images-with-firebase-storage/

(携帯電話のファイルシステムから画像を選択し、firebaseストレージにそれをアップロードする方法を扱っ) -

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 
     } 
     }) 
    }) 
    } 

は親切に、ここで見ています。ありがとう。ファイルパスの使用

+1

それは働きました。私は思っています!なぜファイルチューザはuriを返すのですか? uriはどこで使われていますか? –

+2

FilePathはAndroidでのみサポートされていますが、どのようにIOS上でfilePathを解決しますか? – noor

0

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); 
      }); 

     }); 

    } 
関連する問題