Question

我在firebase中有此上传图片，该图片返回了一个downloadURL，如何在vue js中将该值传递给本地变量image_url？

//local variable
data(){
   return{
        image_url : '',
   }
}

按钮触发器以上传图片

<div class="col col-md-2 text-right pad-left">
     <md-button 
        class="btn-block 
        md-raised md-primary" 
        v-on:click="createOrUpdateUser()">Submit
     </md-button>
</div>

上传图片的功能

createOrUpdateUser(){
   // Create a root reference
   var storageRef = firebase.storage().ref('/images/' + 
   this.filename);      

   var uploadTask = storageRef.put(this.image);

   uploadTask.on('state_changed', function(snapshot){

        }, function(error) {

        // Handle unsuccessful uploads
        }, function() {

        // Handle successful uploads on complete
        // For instance, get the download URL: 
        https://firebasestorage.googleapis.com/...

        uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {

             //i need to pass downloadURL to the image_url variable above...
             console.log('File available at', downloadURL);
        });
   });
}

Answer 1

// ...
data() {
   image_url: ''
},
methods: {
  var self = this;
  createOrUpdateUser: function () {
      //... your code
      uploadTask.on('state_changed', function(snapshot){

      }, function(error) {

      // Handle unsuccessful uploads
      }, function() {

      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...

      uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
         //i need to pass downloadURL to the image_url variable above...
         self.image_url = downloadURL
         console.log('File available at', downloadURL);
       });
    });

    }
  }

将Firebase downloadURL传递给本地变量

1 个答案: