[英]vusjs dropzone image upload with firebase (storage is not a function)
Been following this guide to help me get image uploads within a small VueJS appp, with not much success.一直按照本指南帮助我在小型 VueJS 应用程序中上传图片,但收效甚微。 I keep getting the error:我不断收到错误:
TypeError: _config_firebaseInit__WEBPACK_IMPORTED_MODULE_2__.default.storage is not a function类型错误:_config_firebaseInit__WEBPACK_IMPORTED_MODULE_2__.default.storage 不是 function
Here is my firebase init file:这是我的 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();
I have a normal form with a vue-dropzone element in place and using the following code:我有一个普通表单,其中包含一个 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);
}
}
};
I also checked the firebase docs here and I think I am right but its not working.我还在这里检查了 firebase 文档,我认为我是对的,但它不起作用。
Your init file ( FirebaseInit
) only exports Firestore:您的初始化文件 ( FirebaseInit
) 仅导出 Firestore:
export default firebaseApp.firestore();
But then in your other file you import this, and try to call storage()
on it.但是然后在您的其他文件中导入它,并尝试在其上调用storage()
。 Since you only exported Firestore, this is equivalent to firebase.firestore().storage()
, which doesn't exist.由于您只导出了 Firestore,这相当于firebase.firestore().storage()
,它不存在。
You should probably export your entire firebaseApp
or the entire firebase
namespace:您可能应该导出整个firebaseApp
或整个firebase
命名空间:
export default firebase // export default firebaseApp
In the other page you'll then have to use firebase.firestore()
and firebase.storage()
to access those services, so for example:在另一个页面中,您必须使用firebase.firestore()
和firebase.storage()
来访问这些服务,例如:
firebase.firestore().collection("listings")`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.