Nuxt JS 未定义 Firebase 存储 XMLHttpRequest 错误

Question

我的网络应用程序需要帮助，该应用程序正在将图像上传到firebase storage，然后想在缩略图中显示该图像。

我收到错误 this.xhr_ = new XMLHTTPREQUEST is not defined

我没有 10 个代表点，所以我似乎无法直接上传我的图片。 如果有更好的方法，请告诉我。

我查看了 firebase 文档和许多堆栈溢出答案，但似乎有任何可行的方法。我尝试全局安装xmlhttprequest，也作为依赖项。

如您所见，我也尝试导入 XmlHttpRequest，但它什么也没做。

我得到的错误来自 getdownloadurl() 的最后一条语句

<script>
import XMLHTTPREQUEST from 'xmlhttprequest'
import ImageCard from '../../components/ImageCard/ImageCard'
import {db} from '../../firebase/init.js'
import {storage} from '../../firebase/init.js'
export default {
    name: "explore",
    components: {
        ImageCard,
        db,
        storage,
        XMLHTTPREQUEST
    },
    data() {
        return {
            cards: [],
            downloadUrl: ''
        }
    }, 
    created(){
        //fetch data from firestore
        db.collection('Assets').get()
        .then(snapshot => {
            snapshot.forEach( doc => {
                let card = doc.data()
                console.log(card)
                // the card.id is adding an id property onto the let card variable
                card.id = doc.id
                this.cards.push(card)
                console.log(this.cards)
            })
        })

    },
    created() {  
      const storageRef = storage.ref()
      const imagesRef = storageRef.child('AshAngelPaid.jpg');
        console.log('Before getting requesting download url')
      imagesRef.getDownloadURL().then( (url) => {

            document.querySelector('img').src = url;
          console.log('got download url');

Answer 1

基本上，当 nuxtjs 在服务器端渲染您的组件时，没有 xmlhttprequest，只需将 .getDownloadURL 和相关内容移动到 mount() 或 beforeMount() 生命周期钩子中。