Nuxt JS 未定义 Firebase 存储 XMLHttpRequest 错误

Posted 2023-02-22

【中文标题】Nuxt JS 未定义 Firebase 存储 XMLHttpRequest 错误

【英文标题】：Firebase Storage XMLHttpRequest is not defined error with Nuxt JS

【发布时间】：2019-05-11 23:22:21

【问题描述】：

我的网络应用程序需要帮助，该应用程序正在将图像上传到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');

【问题讨论】：

您好，欢迎您，请不要将您的代码发布为屏幕截图 - 编辑您的问题并发布正确的代码。

谢谢@aliusman 我知道该怎么做，我希望这是可读的格式。

感谢更新，辛苦了，

【参考方案1】：

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

【讨论】：

我有完全相同的问题，但想在服务器端生成下载 url。你知道这是否可能吗？也许与 axios 模块有关？