从Firebase将图像URL保存到实时数据库

Question

我无法将this.picture转到addTutorial:function(){}

从URL取回URL后，我试图保存该URL。

export default {
  name: 'tutform',

  firebase: {
    tutorials: messagesRef
  },

  data() {
    return {
      imageData: null,
      picture: null,
      uploadValue: 0,
      dialog: false,
      displayText: 'Push me!',
      newTutorial: {
        first: '',
        content: '',
        email: '',
        last: '',
        language: '',
        title: '',
        date: '',
        picture: ''
      },
      languages: [
        'Html', 'Css', 'Vue', 'Ruby', 'Js', 'Sass', 'Other'
      ],
      nameRules: [
        v => !!v || 'you must type something',
        v => v.length <= 10 || 'hum.. this monk smelling somthing strange... must be less than 10 characters',
      ],
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'Please enter a valid email containing @ ',
      ],
      contentRules: [
        v => !!v || 'Content is required amigo!'
      ],
      titleRules: [
        v => !!v || 'Tittle is required buddy!',
        v => v.length <= 100 || 'Woots!, Lets try making this one shorter'
      ]
    }
  },

  methods: {
    previewImage(event) {
      this.uploadValue = 0;
      this.picture = null;
      this.imageData = event.target.files[0];
    },
    onUpload() {
      this.picture = null;
      const storageRef = Firebase.storage().ref(`tutorials/images/${this.imageData.name}`).put(this.imageData);
      storageRef.on(`state_changed`, snapshot => {
          this.uploadValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        }, error => {
          console.log(error.message)
        },
        () => {
          this.uploadValue = 100;
          storageRef.snapshot.ref.getDownloadURL().then((url) => {
            this.picture = url;
            console.log(this.picture);
            toastr.success('Image Uploaded successfully');
          })
        }
      )
    },
    addTutorial: function() {
      this.picture = null;
      messagesRef.push(this.newTutorial);
      this.newTutorial.first = '';
      this.newTutorial.last = '';
      this.newTutorial.content = '';
      this.newTutorial.email = '';
      this.newTutorial.language = '';
      this.newTutorial.title = '';
      this.newTutorial.date = '',
        this.newTutorial.picture = (this.picture);
      toastr.success('Horray! message sent successfully');
      this.displayText = 'Nice job!';
      this.nameRules = true;
      this.emailRules = true;
      this.contentRules = true;
      this.titleRules = true;
    },
    markcompleted: function() {
      this.displayText = 'hum.. somthing still missing';
    }
  },

}

我尝试使用此行调用网址：

this.newTutorial.picture= (this.picture);

但是幸运的是，我仍然可以在控制台上获取URL，但不能在实时数据库上获取

有什么建议吗？

Answer 1

您的主要问题似乎是，在将this.newTutorial.picture = this.picture对象推送到实时数据库之后，您仅在{strong> 之后分配了newTutorial。

据我所知，似乎没有任何理由在picture对象中具有单独的data值。您也可以直接将图片网址分配给newTutorial并在推送数据后清除它

storageRef.snapshot.ref.getDownloadURL().then(url => {
  this.newTutorial.picture = url;
  toastr.success('Image Uploaded successfully');
})

addTutorial: function() {
  messagesRef.push(this.newTutorial)
  this.newTutorial = {
    first: '',
    content: '',
    email: '',
    last: '',
    language: '',
    title: '',
    date: '',
    picture: ''
  }
  toastr.success('Horray! message sent successfully');
  this.displayText = 'Nice job!';
  this.nameRules = true;
  this.emailRules = true;
  this.contentRules = true;
  this.titleRules = true;
}