Q&A
https://qiita.com/TMTN/questions/86a47a2f6206a9c6f053
以下ご対応ください。
https://teratail.com/help#posted-otherservice
#Firebase storageにて取得した画像データをFirestoreにデータを保存したいです。
Storageにデータを保存してページ内に画像を表示するようにしており、
以下でFrestoreに画像データを保存するようにコードを記述しております。
uploadImage() { //画像をfirebase storageに保存 firebase .storage() .ref(this.uploadUrl) //さっき決めたパスを参照して、 .put(this.file) //保存する .then(() => { //保存が成功したら、保存した画像ファイルの場所とともにfirestoreに保存する準備 const uploadedImage = { uploadUrl: this.uploadUrl, time: firebase.firestore.FieldValue.serverTimestamp() }; // ここでfirebase firestoreに保存する firebase .firestore() .collection("users") //保存する場所を参照して、 .doc(this.$route.params.uid) //追加で保存 .add({ uploadedImage: uploadedImage }); });
しかし、更新ボタンに@click="updateBtn(); uploadImage();" と発火させるようにしているためか、
コードに誤りがあるのか、プロフィール画像のみ変更してもStorageに保存されるだけでFirestoreに保存されません。。
何が原因で表示されないのか分からず行き詰まってしまっております・・
分かる方いらっしゃいましたらお力添えをいただきたいです。
よろしくお願いいたします。
#プロフィール画像を表示させるHTML内コード
<img :src="preview" width="200" height="200" class="profile-img" alt="プロフィール画像" /> <label class="profile-txt profile-update">プロフィール画像を編集する <input type="file" @change="onFileChange" style="display:none" /> </label>
#プロフィール情報を表示させるHTML内コード
<div class="profile-items flex"> <div class="profile-contens flex"> <input type="text" class="profile-item" placeholder="名前" v-model="name" /> </div> <div class="profile-contens flex"> <select class="profile-select" v-model="sex" :style="{ color: sex == '' ? 'gray' : 'white' }" > <option class="profile-item" value hidden>性別</option> <option v-for="sex in sexs" :value="sex.name" :key="sex.id" class="profile-item" style="color: white;" >{{ sex.name }}</option> </select> </div> <div class="profile-contens flex"> <select class="profile-select" v-model="age" :style="{ color: age == '' ? 'gray' : 'white' }" > <option class="profile-item" value hidden>年齢</option> <option v-for="age in ages" :value="age.name" :key="age.id" class="profile-item" style="color: white;" >{{ age.name }}</option> </select> </div> ~ 省略 ~ <button @click="updateBtn(); uploadImage();" class="update-btn flex">更新</button>
#プロフィール画像保存する為のjs内コード
export default { data() { return { file: "", uploadedImage: "", preview: require("../assets/デフォルトの画像.jpg") }; }, methods: { }, onFileChange(e) { const image = e.target.files; //選択された画像ファイルを選択 this.file = image[0]; //画像ファイルを1つだけ選択 // Firebase storageに保存するパス乱数で決めてthis.uploadUrlへ代入 const S = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; const N = 16; this.uploadUrl = Array.from(crypto.getRandomValues(new Uint32Array(N))) .map(n => S[n % S.length]) .join(""); let self = this; let fileReader = new FileReader(); //FileReaderは、Fileオブジェクトからデータを読み込むことのみを目的としたオブジェクト fileReader.onload = function() { //fileReader.onloadは、読み込みが正常に完了した時に発火するイベント self.preview = fileReader.result; //fileReaderの結果をself.previewへ代入 //関数の中ではfileReaderの[this]を参照してしまうため、一旦[self]に代入して、[this.]の代わりに[self.] とする }; fileReader.readAsDataURL(this.file); //this.fileの値をデータURLとして読み込み、434行目が発火する。 }, uploadImage() { //画像をfirebase storageに保存 firebase .storage() .ref(this.uploadUrl) //さっき決めたパスを参照して、 .put(this.file) //保存する .then(() => { //保存が成功したら、保存した画像ファイルの場所とともにfirestoreに保存する準備 const uploadedImage = { uploadUrl: this.uploadUrl, time: firebase.firestore.FieldValue.serverTimestamp() }; // ここでfirebase databaseに保存する firebase .firestore() .collection("users") //保存する場所を参照して、 .doc(this.$route.params.uid) //追加で保存 .add({ uploadedImage: uploadedImage }); }); } },
#プロフィール情報保存する為のjs内コード
export default {
data() {
return {
name: "",
sex: "",
sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }],
age: "",
ages: [
{ name: "10際未満" },
{ name: "10 ~ 19歳" },
{ name: "20 ~ 29歳" },
~ 省略 ~
], access: "", accesses: [ { name: "北海道" }, { name: "青森県" }, { name: "岩手県" },
~ 省略 ~
], profession: "", professions: [ { name: "公務員" }, { name: "会社員" }, { name: "自営業" },
~ 省略 ~
], selfpr: "", genre: "", genres: [ { id: 0, name: "ジャンル" }, { id: 1, name: "アクション" }, { id: 2, name: "ドラマ" }, { id: 3, name: "恋愛" },
~ 省略 ~
], favMovie: "", uploadedImage: "", profileData: {}, //配列にしないようにする。 open: false, };
},
components: {
Header,
},
methods: {
methods: {
// updateBtn()が押下されたら、dbインスタンスを初期化して"posts"という名前のコレクションへの参照
updateBtn() {
firebase
.firestore()
.collection("users")
.doc(this.$route.params.uid)
//現在のURLのパラメーターを取得。
.set(
{
name: this.name,
sex: this.sex,
age: this.age,
access: this.access,
selfpr: this.selfpr,
profession: this.profession,
genre: this.genre,
favMovie: this.favMovie,
time: firebase.firestore.FieldValue.serverTimestamp()
//サーバ側で値設定
},
{ merge: true }
//set()でmergeをtrueにすると、上書き。updetaと同様。
);
created() {
const currentUser = firebase.auth().currentUser;
if (currentUser) { firebase .firestore() .collection("users") .doc(this.$route.params.uid) .get() .then(snapshot => { this.profileData = snapshot.data(); this.name = this.profileData.name || ""; this.sex = this.profileData.sex || ""; this.age = this.profileData.age || ""; this.access = this.profileData.access || ""; this.selfpr = this.profileData.selfpr || ""; this.profession = this.profileData.profession || ""; this.uploadedImage = this.profileData.uploadedImage || ""; this.genre = this.profileData.genre || ""; this.favMovie = this.profileData.favMovie || ""; //全てのデータを取得して、profileDataへ代入。 // console.log(snapshot.data()); }); }
回答1件
0
自己解決
このやり方が正なのか分からないですが・・
下記のようにする事で解決いたしました。
uploadImage() { //画像をfirebase storageに保存 firebase .storage() .ref(this.uploadUrl) //さっき決めたパスを参照して、 .put(this.file) //保存する .then(() => { //保存が成功したら、保存した画像ファイルの場所とともにfirestoreに保存する準備 const uploadedImage = { uploadUrl: this.uploadUrl, time: firebase.firestore.FieldValue.serverTimestamp(), }; // ここでfirebase firestoreに保存する firebase .firestore() .collection("users") //保存する場所を参照して、 .doc(this.$route.params.uid) //追加で保存setメソッドを使うと上書きされる .set( { name: this.name, sex: this.sex, age: this.age, access: this.access, selfpr: this.selfpr, profession: this.profession, genre: this.genre, favMovie: this.favMovie, uploadedImage: uploadedImage, time: firebase.firestore.FieldValue.serverTimestamp(), }, { merge: true } ); }); console.log(this.file); },
投稿2021/05/15 08:26
総合スコア53
あなたの回答
tips
プレビュー
