質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Q&A

解決済

1回答

1162閲覧

【Vue x Storage】Storageにて取得した画像データをFirestoreにデータを保存したいです

TMTN

総合スコア52

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

0グッド

0クリップ

投稿2021/05/12 05:19

#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()); }); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TMTN

2021/05/14 02:07

1T2R3M4様 ご指摘ありがとうございます。 対応済です。大変申し訳ございませんでした。
guest

回答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

TMTN

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問