存储和数据库之间的关系 - Firebase答案

【问题标题】：Relation between storage and database - Firebase存储和数据库之间的关系 - Firebase
【发布时间】：2023-03-14 20:44:02
【问题描述】：

我面临另一个问题。

我使用 firebase db 来存储文本，使用 firebase 存储来存储文件。我的问题来了。

问：当从数据库获取特定元素时，如何从存储获取正确的图像？

这是我的尝试：

const storageRef = firebase.storage().ref('companyImages/companyImage' + 123);
                                            ^^^^^^^^^^^^ I dont have access to id yet :(
const task = storageRef.put(companyImage);

task.on('state_changed', () => {
  const percentage = (snap.bytesTransferred / snap.totalBytes) * 100; 
                               // ^^^^^^^^^^^^ not sure if i even need this
}, (err) => {
    console.log(err);
}, () => {
  firebase.database().ref('offers').push(values);
    ^^^^^^^^^^^^^^^ now I could retrieve id from it with .key but its too late
});

如您所见，首先我要做的是上传图像，当它成功时，我开始将数据上传到数据库。

不过，它并没有按预期工作。上传图像时，我必须用正确的id 命名它，以便稍后在组件中轻松检索它。

它可能看起来有点复杂，但会感谢任何形式的帮助。任何建议或提示。

是否应该先上传数据到DB，再上传图片到存储？

【问题讨论】：

标签： javascript reactjs firebase

【解决方案1】：

您可以在上传文件之前生成推送 ID - 您也可以将返回快照的下载 URL 保存在 task.snapshot.downloadURL，这样您就不必使用存储引用从存储中检索文件。

const offerRef = firebase.database().ref('offers').push();
const storageRef = firebase.storage().ref(`companyImages/${offerRef.key}`);
const task = storageRef.put(companyImage);

task.on('state_changed', (snap) => {
  const percentage = (snap.bytesTransferred / snap.totalBytes) * 100; 
}, (error) => {
  console.log(err);
}, () => {
  offerRef.set(values);
});

【讨论】：

啊它总是让我抓狂，也许现在我会记得了。

【解决方案2】：

我建议使用 .getDownloadURL()。然后将所有uploadedfileDownloadURL 推送到一个对象或数组中，然后将其存储到您的数据库中。因此，将来您可以从您的用户/ProfilePHotos 访问此对象或数组，然后在您的应用程序级代码中，您可以使用 DownloadURL 作为图像标签内的 uri 链接！

在这个例子中，我使用的是 react-native，我上传了多张照片，每次将下载 URL 保存在一个数组中，然后将数组设置为用户帐户下的 firebase。

export const userVehiclePhotoUploadRequest = (photos, user, year) => dispatch => {
    console.log('Inside vehiclePhotoUpload Actions', photos, user)

    let referenceToUploadedPhotos = [];

    return new Promise((resolve, reject) => {
        photos.map(ele => {
            let mime = 'application/octet-stream'

            let uri = ele.uri
            let uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
            let sessionId = new Date().getTime()
            let uploadBlob = null
            let imageRef = firebase.storage().ref('vehicleImages/' + `${user.account.uid}`).child(`${sessionId}`)

            fs.readFile(uploadUri, 'base64')
                .then((data) => {
                    return Blob.build(data, { type: `${mime};BASE64` })
                })
                .then((blob) => {
                    uploadBlob = blob
                    return imageRef.put(blob, { contentType: mime })
                })
                .then(() => {
                    uploadBlob.close()
                    return imageRef.getDownloadURL()
                })
                .then((url) => {
                    referenceToUploadedPhotos.push(url)
                    console.log('ARRAY OF URLS WHILE PUSHING', referenceToUploadedPhotos)
                    resolve(url)
                })
                .catch((error) => {
                    reject(error)
                })
        })
    })
        .then(() => {
            //I did this to not go home until photos are done uploading. 

            let vehicles;
            firebase.database().ref('users/' + user.account.uid + `/allVehicles/allVehiclesArray`).limitToFirst(1).once('value').then(function (snapshot) {
                // ******** This method is straight from their docs ********
                // ******** It returns whatever is found at the path xxxxx/users/user.uid ********
                vehicles = snapshot.val();
            }).then(() => {
                console.log('ARRAY OF URLS BEFORE SETTING', referenceToUploadedPhotos)
                // let lastVehicle = vehicles.length - 1;
                firebase.database().ref('users/' + user.account.uid + `/allVehicles/allVehiclesArray/` + `${Object.keys(vehicles)[0]}` + `/photosReference`).set({
                    referenceToUploadedPhotos
                }).then(() => {
                    dispatch(loginRequest(user.account))
                })
            })


        })


};

然后在您的代码中，让我们说在用户信息的地图中......

 { ele.photosReference !== undefined ? dynamicAvatar = { uri: `${ele.photosReference.referenceToUploadedPhotos[0]}` } : undefined }

【讨论】：