Daten mit Auflösung (x) übergeben wird als undefined

Question

Ich versuche, eine url übergeben, die ich von der Funktion getDownloadURL() unten erhalten, ist es in der Nähe der Unterseite des Codes. Alles auf dieser Seite des Problems scheint zu funktionieren - außer es scheint, dass die resolve möglicherweise nicht richtig arbeiten werden:

// Return a promise to catch errors while loading image 
    getMediaFormulas(options, square): Promise<any> { 

    // Get Image from ionic-native's built in camera plugin 
    return this.camera.getPicture(options) 
     .then((fileUri) => { 

     // op Image, on android this returns something like, '/storage/emulated/0/Android/...' 
     // Only giving an android example as ionic-native camera has built in cropping ability 
     if (this.platform.is('ios')) { 

      return this.crop.crop(fileUri, { quality: 2 }); 
     } else if (this.platform.is('android')) { 
      // Modify fileUri format, may not always be necessary 
      fileUri = 'file://' + fileUri; 

      /* Using cordova-plugin-crop starts here */ 
      return this.crop.crop(fileUri, { quality: 2 }); 
     } 
     }) 
     .then(newPath => { 
     console.log(newPath); 
     if(newPath) { 
     let fileName = newPath.substring(newPath.lastIndexOf("/") + 1, newPath.length); 
     let filePath = newPath.substring(0, newPath.lastIndexOf("/")); 
     this.file.readAsDataURL(filePath, fileName).then(data =>{ 
      console.log("IN READASDATAURL GETMEDIAFORMULAS"); 
      //let strImage = data.replace(/^data:image\/[a-z]+;base64,/, ""); 
      //this.file.writeFile(this.file.tempDirectory, "image.jpg", strImage); 
      //let blob = dataURItoBlob(data); 

      //let file 

      //this.getFileEntryRead(this.file.tempDirectory + '/image.jpg', square); 
      var dataURL = data; 

      let image  : string = 'formula_' + this.username + '_' + new Date() + '.png', 
      storageRef : any, 
      parseUpload : any, 
      thisUrl: any; 

      return new Promise((resolve, reject) => { 
      storageRef  = firebase.storage().ref('/formulas/' + this.username + '/' + image); 
      parseUpload  = storageRef.putString(dataURL, 'data_url'); 

      parseUpload.on('state_changed', (_snapshot) => { 
       // We could log the progress here IF necessary 
       console.log('snapshot progess ' + _snapshot); 
       }, 
       (_err) => { 
       reject(_err); 
       console.log(_err.messsage); 
       }, 
       (success) => { 
       storageRef.getDownloadURL().then(url => { 
        console.log(url); 
        thisUrl = url; 
        console.log("IN READASDATAURL GETMEDIAFORMULAS UERLRLRLR"); 

       }); 

       resolve(thisUrl); 
       }) 
      }).catch(function(error) { 
       console.log(error.message); 
      }); 


     }) 
     } 


     }); 


    } 

ich die resolve sage vielleicht nicht, weil auf der Seite arbeiten, wo die getMediaFormula genannt wird, nichts kommt zurück in der then Funktion - url ist undefined. Es ist für ein actionsheet in einer der Auswahlmöglichkeiten zurückgegeben:

presentActionSheet3() { 
    let actionSheet = this.actionSheetCtrl.create({ 
     title: 'Choose source', 
     buttons: [ 
     { 
      text: 'Camera', 
      handler:() => { 
      let itemArrayTwo = this.profComponents.toArray(); 
      this.cameraService.getMediaFormulas(this.optionsGetCamera, this.square).then((url) => { 
       actionSheet.dismiss(); 
       this.navCtrl.push(FormulapostPage, { path: url }); 
      }); //pass in square choice 
      //this.myrenderer.setElementAttribute(this.itemArrayTwo[this.square - 1].nativeElement, 'src', 'block'); 
      console.log('camera clicked'); 
      //actionSheet.dismiss(); 
      } 
     },{ 
      text: 'Photo Library', 
      handler:() => { 
      let itemArrayTwo = this.profComponents.toArray(); 

      this.cameraService.getMediaFormulas(this.optionsGetMedia, this.square).then((url) => { 
       setTimeout(() => { 
       console.log(url + " url url url url") 
       actionSheet.dismiss(); 
       this.navCtrl.push(FormulapostPage, { path: url }); 
       },3000); 

      }); //pass in square choice 
      //this.myrenderer.setElementAttribute(this.itemArrayTwo[this.square - 1].nativeElement, 'src', 'block'); 
      console.log('camera clicked'); 
      //actionSheet.dismiss(); 
      } 
     },{ 
      text: 'Cancel', 
      role: 'cancel', 
      handler:() => { 
      console.log('Cancel clicked'); 
      } 
     } 
     ] 
    }); 
    actionSheet.present(); 
    } 

Das Problem ist also die then der Anruf getMediaFormulas zurückkehrt und undefined url, aber in dem Code, in dem abgefragt wird, in dem Versprechen, es ist richtig erstellt und in resolve wie folgt verwendet resolve(thisUrl). Warum ist url im Action Sheet undefiniert?

Answer 1

Es gibt zwei Probleme mit diesem Code:

Wie in meinem Kommentar darauf hingewiesen, müssen Sie die readAsDataUrl Versprechen zurückzukehren, zB:

... 
let fileName = newPath.substring(newPath.lastIndexOf("/") + 1, newPath.length); 
let filePath = newPath.substring(0, newPath.lastIndexOf("/")); 
return this.file.readAsDataURL(filePath, fileName).then(data =>{ 
     console.log("IN READASDATAURL GETMEDIAFORMULAS"); 
     ... 

Und zusätzlich, wie durch @trincot wies darauf hin, die Auflösung liegt im falschen Bereich und sollte eine Stufe höher sein, z. B .:

... 
(success) => { 
    storageRef.getDownloadURL().then(url => { 
    console.log(url); 
    thisUrl = url; 
    console.log("IN READASDATAURL GETMEDIAFORMULAS UERLRLRLR"); 

    // Should be here, not outside of this then. Though as you mentioned it my have only been outside due to your testing 
    resolve(thisUrl); 
}); 
...