2017-10-05 123 views
2

我在爲壁紙構建離子應用程序。離子文件下載不起作用

在應用程序中,顯示存儲在www/assets/img中的圖像。我在下面創建了2個按鈕,用於將顯示的圖像下載並檢索到移動設備內存。

當我點擊下載按鈕時,會顯示一個對話框,說「下載成功!Pug.jpg已成功下載到:filepath」。但是當我檢查手機內存時,沒有這樣的文件存在。還有,當我點擊「Retrieve 「按鈕,它顯示的對話框說」文件檢索成功Pug.jpg成功地從檢索:。文件路徑「」即使文件不存在在手機內存

這是home.ts代碼

import {Component} from '@angular/core'; 
import {NavController, Platform, AlertController} from 'ionic-angular'; 
import {Transfer, TransferObject} from '@ionic-native/transfer'; 
import {File} from '@ionic-native/file'; 

declare var cordova: any; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [Transfer, TransferObject, File] 
}) 

export class HomePage { 

    storageDirectory: string = ''; 

    constructor(public navCtrl: NavController, public platform: Platform, private transfer: Transfer, private file: File, public alertCtrl: AlertController) { 
    this.platform.ready().then(() => { 
     // make sure this is on a device, not an emulation (e.g. chrome tools device mode) 
     if(!this.platform.is('cordova')) { 
     return false; 
     } 

     if (this.platform.is('ios')) { 
     this.storageDirectory = cordova.file.documentsDirectory; 
     } 
     else if(this.platform.is('android')) { 
     this.storageDirectory = cordova.file.dataDirectory; 
     } 
     else { 
     // exit otherwise, but you could add further types here e.g. Windows 
     return false; 
     } 
    }); 
    } 

    downloadImage(image) { 

    this.platform.ready().then(() => { 

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

     const imageLocation = `${cordova.file.applicationDirectory}www/assets/img/${image}`; 

     fileTransfer.download(imageLocation, this.storageDirectory + image).then((entry) => { 

     const alertSuccess = this.alertCtrl.create({ 
      title: `Download Succeeded!`, 
      subTitle: `${image} was successfully downloaded to: ${entry.toURL()}`, 
      buttons: ['Ok'] 
     }); 

     alertSuccess.present(); 

     }, (error) => { 

     const alertFailure = this.alertCtrl.create({ 
      title: `Download Failed!`, 
      subTitle: `${image} was not successfully downloaded. Error code: ${error.code}`, 
      buttons: ['Ok'] 
     }); 

     alertFailure.present(); 

     }); 

    }); 

    } 

    retrieveImage(image) { 

    this.file.checkFile(this.storageDirectory, image) 
     .then(() => { 

     const alertSuccess = this.alertCtrl.create({ 
      title: `File retrieval Succeeded!`, 
      subTitle: `${image} was successfully retrieved from: ${this.storageDirectory}`, 
      buttons: ['Ok'] 
     }); 

     return alertSuccess.present(); 

     }) 
     .catch((err) => { 

     const alertFailure = this.alertCtrl.create({ 
      title: `File retrieval Failed!`, 
      subTitle: `${image} was not successfully retrieved. Error Code: ${err.code}`, 
      buttons: ['Ok'] 
     }); 

     return alertFailure.present(); 

     }); 
    } 

} 

這是home.html代碼

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     File Transfer Example 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <ion-card> 
    <ion-card-header> 
     Ionic 3 File Transfer Example 
    </ion-card-header> 
    <ion-card-content> 
     <img src="assets/img/pug.jpg" alt="Cute Pug"> 
     <button ion-button (click)="downloadImage('pug.jpg')" color="secondary">Download image</button> 
     <button ion-button (click)="retrieveImage('pug.jpg')" color="secondary">Retrieve downloaded image</button> 
    </ion-card-content> 
    </ion-card> 
</ion-content> 

我建立在此基礎上Github code example

其實我是想離子應用先在內部存儲器中的文件夾(命名的文件夾的應用程序),並把there.So用戶可以在該文件夾中訪問文件的所有圖像這種離子的應用程序。例如,如果應用程序名稱是「Appsample」,則所有圖像應位於內部存儲器中的Appsample文件夾中。

我該如何發展以上目的?

謝謝。

回答

4

我剛剛張貼的答案,幾乎同樣的問題,請參見:

Download not working using filetransfer plugin

這裏的主要問題是,您使用以下目錄保存文件:

else if(this.platform.is('android')) { 
     this.storageDirectory = cordova.file.dataDirectory; 
} 

正如科爾多瓦文檔(https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#where-to-store-files)說:「cordova.file.dataDirectory」是持久的和私人使用內部存儲器在應用程序的沙箱中存儲數據。

使用cordova.file.externalDataDirectory以符合您的目的。然後該文件應放置在某處:「file:/// storage/emulated/0/Android/data/subdomain.domainname.toplevdomain/files/...」。

在Android上,外部存儲目錄始終存在。如果設備沒有物理卡,Android會模擬它。

+0

我已經得到了答案。無論如何,謝謝。 – codewiz

+0

圖片下載顯示成功,但在iPhone上不可見。如何解決 –