Nuxt.js＋Firebaseで、画像とテキストを投稿できる仕組みを作りたい
質問したいこと
Nuxt.jsとFirebaseで、画像とテキストを一緒に投稿できるようなサイトを作ろうとしています。
CloudFirestoreからテキストを投稿できるとこまでは完成したのですが、画像の投稿がうまくいきません。
良い方法があれば、教えていただけると嬉しいです。
▼現状の一覧画面
▼現状の投稿画面
試したこと
写真を投稿するとFirebase Storageに保存→CloudFirestoreにurlとして登録して、アプリに返す
とかできるのかな？と思って、試してみたのですが（ソースコード参照）恥ずかしながら途中でよくわからなくなってしまいました。
エラー
コンソールには以下のようなエラーが出てます。・・・
（が、ここはあまり画像投稿には影響してない気もしてます・・・）
→こちらは解決しました！
ソースコード
投稿画面
<template>
<section class="section">
<div class="postform">
<p>
<input v-model="title" placeholder="店名"><br>
<input v-model="name" placeholder="名前"><br>
<input v-model="memo" placeholder="ひとこと"><br>
<input type="file" accept="image/*"><br>
<b-button type="is-warning" v-on:click='post'><b>投稿</b></b-button>
</p>
</div>
</section>
</template>
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
name: 'HomePage',
data: function(){
return {
title:'',
name:'',
memo:''
}
},
methods: {
//初期化、設定
init: () => {
// 自分の情報に置き換え
const config = {
apiKey: "自分の情報",
authDomain: "自分の情報",
databaseURL: "自分の情報",
projectId: "自分の情報",
storageBucket: "自分の情報",
messagingSenderId: "自分の情報",
appId: "自分の情報"
};
// Initialize Firebase
if (firebase.apps.length === 0) {
firebase.initializeApp(config);
}
},
//データ追加
post: function(){
const testId = firebase.firestore().collection('memos').doc().id; //ユニークなIDを生成
const docRef = firebase.firestore().collection('memos').doc(testId);
const setAda = docRef.set({
title: this.title,
name: this.name,
memo:this.memo//,
file:this.url
});
},
},
mounted(){
//ページ読み込み時に実行される
this.init();
},
}
</script>
表示画面
<template>
<section class="section">
<!--<div>
<p>
<input v-model="title" placeholder="店名"><br>
<input v-model="name" placeholder="名前"><br>
<input v-model="memo" placeholder="ひとこと"><br>
<input type="file" accept="image/*"><br>
<b-button type="is-warning" v-on:click='post'><b>投稿</b></b-button>
</p>
</div>-->
<client-only>
<div class="columns is-multiline">
<div v-for="data in allData" class="column is-4">
<card
v-bind:title="data.title"
v-bind:imgsrc="data.url"
>
名前：{{data.name}}<br>
ひとこと：{{data.memo}}<br>
<!--{{data.timestamp}}>-->
</card>
</div>
</div>
</client-only>
</section>
</template>
<script>
import Card from '~/components/Card'
import firebase from "firebase/app";
import "firebase/firestore";
export default {
components: {
Card
},
name: 'HomePage',
data(){
return{
allData:[]
}
},
methods: {
//初期化、設定
init: () => {
// 自分の情報に置き換え
const config = {
apiKey: "自分の情報",
authDomain: "自分の情報",
databaseURL: "自分の情報",
projectId: "自分の情報",
storageBucket: "自分の情報",
messagingSenderId: "自分の情報",
appId: "自分の情報"
};
// Initialize Firebase
if (firebase.apps.length === 0) {
firebase.initializeApp(config);
}
},
//データ取得
get: function(){
this.allData = [];
firebase.firestore().collection('memos').get().then(snapshot => {
snapshot.forEach(doc => {
// console.log(doc);
this.allData.push(doc.data());
})
});
}
},
mounted(){
//ページ読み込み時に実行される
this.init();
this.get();
},
}
</script>
できない場合も考えて、他のAPIでもできないか模索中ですが・・・
何かアイディアがあれば、教えていただけますと幸いです。
よろしくお願いします。
0
