使用firebase上传vue js dropzone图像（存储不是功能）

Posted 2023-02-22

【中文标题】使用firebase上传vue js dropzone图像（存储不是功能）

【英文标题】：vusjs dropzone image upload with firebase (storage is not a function)

【发布时间】：2020-09-28 20:17:53

【问题描述】：

一直关注this guide 帮助我在一个小型 VueJS 应用程序中上传图片，但没有多大成功。我不断收到错误：

TypeError: _config_firebaseInit__WEBPACK_IMPORTED_MODULE_2__.default.storage 不是函数

这是我的 firebase 初始化文件：

import firebase from "firebase";
import "firebase/storage";
import firebaseConfig from "./firebaseConfig";

const firebaseApp = firebase.initializeApp(firebaseConfig);

var storage = firebase.storage();

export default firebaseApp.firestore();

我有一个正常的表单，其中包含一个 vue-dropzone 元素并使用以下代码：

import firebase from "../../../config/firebaseInit";
import  uuid  from "vue-uuid";
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";

export default 
  name: "new-listing",
  components: 
    vueDropzone: vue2Dropzone
  ,
  data() 
    return 
      dropzoneOptions: 
        url: "https://httpbin.org/post",
        thumbnailWidth: 150,
        thumbnailHeight: 150,
        addRemoveLinks: false,
        acceptedFiles: ".jpg, .jpeg, .png",
        dictDefaultMessage: `<p class='text-default'><i class='fa fa-cloud-upload mr-2'></i> Drag Images or Click Here</p>
          <p class="form-text">Allowed Files: .jpg, .jpeg, .png</p>
          `
      ,
      images: [],
      id: null,
      title: null,
      subTitle: null,
      endDate: null,
      maxTickets: null,
      question: null,
      answer1: null,
      answer2: null,
      answer3: null
    ;
  ,

  methods: 
    saveListing() 
      firebase.collection("listings")
        .add(
          title: this.title,
          subTitle: this.subTitle,
          endDate: this.endDate,
          maxTickets: this.maxTickets,
          question: this.question,
          answer1: this.answer1,
          answer2: this.answer2,
          answer3: this.answer3
        )
        .then(docRef => 
          console.log("Client added: ", docRef.id);
          this.$router.push("/");
        )
        .catch(error => 
          console.error("Error adding listing: ", error);
        );
    ,
    async afterComplete(upload) 
      var imageName = uuid.v1();
      this.isLoading = true;
      try 
        //save image
        let file = upload;
        var metadata = 
          contentType: "image/png"
        ;

        var storageRef = firebase.storage().ref();
        var imageRef = storageRef.child(`images/$imageName.png`);

        await imageRef.put(file, metadata);
        var downloadURL = await imageRef.getDownloadURL();
        this.images.push( src: downloadURL );
       catch (error) 
        console.log(error);
      
      this.$refs.imgDropZone.removeFile(upload);
    
  
;

我还检查了 firebase 文档 here，我认为我是对的，但它不起作用。

【参考方案1】：

您的初始化文件 (FirebaseInit) 仅导出 Firestore：

export default firebaseApp.firestore();

但是然后在您的其他文件中导入它，并尝试在其上调用storage()。由于您只导出了 Firestore，因此这相当于 firebase.firestore().storage()，它不存在。

您可能应该导出整个 firebaseApp 或整个 firebase 命名空间：

export default firebase // export default firebaseApp

在另一个页面中，您必须使用firebase.firestore() 和firebase.storage() 来访问这些服务，例如：

firebase.firestore().collection("listings")`

【讨论】：

嗨弗兰克，尝试了这两个选项，但它们只是产生一个错误：创建钩子中的错误：“TypeError：config_firebaseInit__WEBPACK_IMPORTED_MODULE_0_.default.collection 不是一个函数”

您必须将firebase.collection("listings") 扩展为firebase.firestore().collection("listings")。