时间戳

首页 > 解决方案 > 使用 firebase 上传 vusjs dropzone 图像（存储不是功能）

javascript - 使用 firebase 上传 vusjs dropzone 图像（存储不是功能）

问题描述

一直在遵循本指南来帮助我在一个小型 VueJS 应用程序中上传图像，但没有取得多大成功。我不断收到错误：

类型错误：_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 文档，我认为我是对的，但它不起作用。

标签： javascriptfirebasevue.jsfirebase-storagedropzone.js

解决方案

您的 init 文件 ( 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")`

推荐阅读