首页 > 解决方案 > 清除所有站点数据(或应用程序的新用户)时,Firebase 存储上传不起作用

问题描述

这是我过去几周一直试图解决的问题,但没有成功。我在我的项目中使用https://firebase.nuxtjs.org/ 。我的商店操作运行良好,当网站存储一些数据时,图像已成功上传,这意味着如果您不是新用户并且您尚未从 chrome>settings>site settings 中清除站点数据。但是,如果您这样做,则相同的代码将不起作用,并且只会上传一张图片,有时甚至不会上传一张图片。

最糟糕的是,firebase 上传任务和 catch 块都没有抛出错误。清除所有站点数据时,不调用上传任务的第三个回调,表示上传不成功。也是第一个回调,使用快照参数仅调用一次,并记录 0% 的上传进度。再次尝试时(例如,在将某些数据存储为 cookie 之后)调用相同的上传回调并查看日志。

这是我使用的代码。我知道这很丑陋,但是在我尝试了一切之后,我只想找到问题然后重构。请帮忙。

createAd ({ commit }, ad) {
    this.$fire.database.ref('ads').push(ad).then(data => data.key)
      .then(async (key) => {
        console.log('adding new ad with unique key:', key);
        const images = []
        this.$fire.database.ref('ads').child(key).update({ id: key })

        const storageRef = this.$fire.storage.ref();
        const imageRef = storageRef.child(`ad_images/${key}${ad.mainImage.name}`);
        // This is not resolved if you clear site data
        const mainImageUpload = imageRef.put(ad.mainImage);
        mainImageUpload.on('state_changed',
          (snapshot) => {
            const uploadPercentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.error('upload progress in %:', uploadPercentage);
          },
          error => console.error(error),
          () => {
            console.error('main image upload succesful');
            mainImageUpload.snapshot.ref.getDownloadURL().then((downloadURL) => {
              console.error('main image uploaded at:', downloadURL);
              mainImageUpload.snapshot.ref.getMetadata().then(({ name }) => {
                ad.mainImageUrl = { data: downloadURL, name };
                console.log('adding main image url for ad', ad.mainImageUrl);
                this.$fire.database.ref('ads').child(key).update({ mainImageUrl: { data: downloadURL, name } })

                if (!ad.images.length) {
                  commit('createAd', { id: key, ...ad })
                }
              });
            });
          }
        );

        const uploadImage = (image, i) => {
          return new Promise((resolve) => {
            const storageReference = this.$fire.storage.ref();
            const imageReference = storageReference.child(`ad_images/${key}${image.name}`);
            const imageUpload = imageReference.put(image);
            imageUpload.on('state_changed',
              (snapshot) => {
                const uploadPercentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.error('image upload progress in %:', uploadPercentage);
              },
              error => console.error(error),
              () => {
                console.log('successful image upload');
                imageUpload.snapshot.ref.getDownloadURL().then((downloadURL) => {
                  console.error('image uploaded at:', downloadURL);
                  imageUpload.snapshot.ref.getMetadata().then(({ name }) => {
                    console.log('adding images for ad', name, downloadURL)

                    images.push({ data: downloadURL, name })

                    if (i === ad.images.length - 1) {
                      this.$fire.database.ref('ads').child(key).update({ imageUrls: images })

                      ad.imageUrls = images;
                      commit('createAd', { id: key, ...ad });
                    }

                    return resolve();
                  });
                });
              });
          })
        }

        if (ad.images.length) {
          for (let i = 0; i < ad.images.length; i++) {
            const image = ad.images[i];
            await uploadImage(image, i);
          }
        }
      }).catch(error => console.error('creating ad error', error));`

标签: firebasenuxt.jsfirebase-storagenuxtjs

解决方案


推荐阅读