Question

我想允许用户在同一事件上注册并上传图像，因此名称和电子邮件等数据将进入firestore，图像将进入存储桶，目前，我能够实现这两个功能，但要分别实现，所以我有点卡住的是如何将数据和图像链接在一起，以便以后再检索它们。我也想使用Vuex完成此操作。下面的代码说明了如何将数据和图像分别从我的.vue组件发送到firestore和存储中

import { storage } from '../firebase/init.js'
import firebase from 'firebase'

export default {
  data(){
    return {
        email: '',
        password: '',
        image: null
      }
    }, 
    methods: {
      signUp(){
        firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
           .then(response => {
             let user = {
             id: response.user.id,
             email: response.user.email
           }
          //here i want to do something to link this user to the upload image event below
        })
      },
      uploadFile(e){
        const file = e.target.files[0];
        
        storage.ref('images/'+ file.name).put(file)
          .then(response => {
            console.log(response)
          })
          .catch(err => console.log(err))
      }
    }

请在下面留下评论以进一步澄清，

Answer 1

您需要获取firebase来返回图像的url，然后将其作为字段插入数据库中。尝试这样的事情：

satScore = [('NY', 50, 100), ('NJ', 10, 90), ('DC', 25, 50), ('Carolina', 40, 10)]
for idx, _ in enumerate(satScore):
  if satScore[idx][1] > 20:
    print("State {0}: Verbal {1}: Math {2}".format(satScore[idx][0], satScore[idx][1], satScore[idx][2]))

那应该在数据库中插入图像URL，然后在调用所有用户数据时就可以调用它。

Answer 2

createNewProperty({commit, getters, state}, payload) {
  commit('setLoading', true)
  const newService = {
    name : payload.name,
    PropertyMap: payload.PropertyMap,
    location : payload.Location,
    AboutProperty: payload.AboutProperty
  }
  var dropName = ''
  //Check If Service Exists
  firebase.firestore().collection('CompanyMenu')
  .where('name','==',payload.name)
  .where('location','==',payload.Location)
  .get()
  .then(service=>{
    if(service.size == 0) {
      let key
      let imageUrl

      firebase.firestore().collection('properties')
        .add(newService)
        .then( (data)=>{
          key = data.id
          return key
        }).then(key=>{
          const filename = payload.Image.name
          const ext = filename.slice(filename.lastIndexOf('.'))
          dropName = key +'.'+ext

          var uploadTask = firebase.storage().ref('properties/'+ key +'.'+ext).put(payload.Image)
          uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
            function(snapshot) {

              var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              commit('setUploading', progress)
              console.log('Upload is ' + progress + '% done');
              switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED: // or 'paused'
                  console.log('Upload is paused');
                  break;
                case firebase.storage.TaskState.RUNNING: // or 'running'
                  console.log('Upload is running');
                  break;
              }
            },function(error) {
              switch (error.code) {
                case 'storage/unauthorized':
                  console.log('User doesn\'t have permission to access the object')
                  break;

                case 'storage/canceled':
                  console.log('User canceled the upload')
                  break;
                case 'storage/unknown':
                  console.log('Unknown error occurred, inspect error.serverResponse')
                  break;
              }
            },
            function() {
              uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
                console.log('File available at', downloadURL);
                firebase.firestore().collection('properties').doc(key).update({Image: downloadURL,filename: dropName})
                .then( (company)=>{
                  state.properties.push({
                    id: key,
                    Image: downloadURL,
                    filename: dropName,
                    ...newService
                  })
                  commit('setLoading', false)
                  this.$router.push('/Properties')

                } )

              })
          })
        })
    } else {//If Service Exists


    }

  })
}

此代码最适合我。我还添加了一个链接，以防您要从Firebase存储中删除文件

从VueJs应用程序将图像上传到Firebase

2 个答案: