2017-10-05 6 views
2

Je construis une application ionique pour les papiers peints.Le téléchargement du fichier ionique ne fonctionne pas

Dans l'application, il y a une image stockée dans www/assets/img affichée. J'ai les boutons build 2 ci-dessous, pour télécharger et récupérer l'image affichée dans la mémoire de l'appareil mobile. Lorsque je clique sur le bouton de téléchargement, une boîte de dialogue s'affiche, disant "Télécharger réussi! Pug.jpg a été téléchargé avec succès: chemin de fichier" .Mais quand je vérifie la mémoire du téléphone, aucun fichier de ce type n'existe.Aussi quand je clique sur "Récupérer « Bouton il est montrant dialogue disant » réussir la récupération de fichiers Pug.jpg a été récupéré avec succès à partir de:. filepath « » même si le fichier est pas présent dans la mémoire du téléphone

Ceci est du code 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(); 

     }); 
    } 

} 

Ceci est le code 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> 

Je construis cette application ionique à base de cette Github code example

Je veux vraiment l'application ionique d'abord créer un dossier (dossier app nommé) dans la mémoire interne et de mettre toutes les images utilisateurs there.So peuvent accéder aux fichiers dans ce dossier. Par exemple, si le nom de l'application est "Appsample", toutes les images doivent être dans le dossier Appsample de la mémoire interne.

Comment puis-je développer au-dessus du but?

Merci.

Répondre

4

Je viens de poster une réponse à peu près la même question, voir:

Download not working using filetransfer plugin.

Le principal problème ici est que vous utilisez le répertoire suivant pour enregistrer votre fichier:

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

, « cordova.file.dataDirectory » Comme indiqué dans les documents (cordova https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#where-to-store-files) est persistant et privé stockage de données dans le sandbox de l'application en utilisant la mémoire interne.

Utilisez cordova.file.externalDataDirectory pour répondre à vos besoins. Ensuite, le fichier doit être placé quelque part ici: "fichier: /// stockage/emulated/0/Android/data/sous-domaine.domaine.domaine.toplevdomain/fichiers/...".

Sur Android, des répertoires de stockage externes existent toujours. Si l'appareil n'a pas de carte physique, Android l'émulera.

+0

J'ai déjà reçu une réponse à cette question. Quoi qu'il en soit, merci. – codewiz

+0

Téléchargement d'image show réussi mais pas visible sur iphone. comment résoudre –