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

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

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

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

Firebase

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

Google Cloud Storage

Google Cloud Storageは、グーグル社が提供しているクラウドベースのデベロッパー・企業向けストレージサービス。可用性に優れ、APIで操作可能なため、データのアーカイブ保存やアプリケーションのコンテンツ提供など様々な用途に活用できます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

Q&A

解決済

2回答

1617閲覧

【Vue x Firestore】画像をアップロードして表示させたいが、Storageに保存されないです。

TMTN

総合スコア52

Vue.js

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

Firebase

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

Google Cloud Storage

Google Cloud Storageは、グーグル社が提供しているクラウドベースのデベロッパー・企業向けストレージサービス。可用性に優れ、APIで操作可能なため、データのアーカイブ保存やアプリケーションのコンテンツ提供など様々な用途に活用できます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

0グッド

0クリップ

投稿2021/05/23 02:55

編集2021/05/27 15:37

#画像をアップロードして表示させたいが、Storageに保存されないです。

プロフィール情報編集画面にて、左に画像(アイコン設定)、右でプロフィール情報を選択するようにしています。
右のプロフィール編集は特に問題なく、情報を選択後更新ボタン(updateBtn)を押下するとFirestoreに正常にデータが格納されます。

しかし、左の画像設定では「プロフィール画像を編集する」で画像の選択後、更新ボタン(updateBtn)を押下すると
アラートが実行されるのですが、画像が変更されてない状況です。

Storageに保存後、Firestoreに保存、そしてFirestoreのデータを表示するようにしているのですが、
Storageに保存する段階でStorageに保存がされていなかったです。

const uploadTask = firebase .storage() .ref()         .child(this.uploadUrl) .put(this.file);

コードとしては、画像が選択されてなければ画像なしでプロフィール情報をFirestoreへ保存するように記述しています。
※画像選択してない場合であっても、正常に実装はされるのでこちらで問題はないように見受けられます。

イメージ説明

原因が分からず困っております。

分かる方いらっしゃいましたらお力添えを頂きたいです。

宜しくお願い致します。

html

1       <div class="profile-inner flex"> 2 <div class="profile-contens flex"> 3 <div class="profile-img-inner flex"> 4 <img 5 :src="uploadedImage == '' ? preview : uploadedImage.fileUrl" 6 width="200" 7 height="200" 8 class="profile-img" 9 alt="プロフィール画像" 10 /> 11 <label class="profile-txt profile-update"> 12 プロフィール画像を編集する 13 <input 14 type="file" 15 @change="onFileChange" 16 style="display:none" 17 /> 18 </label> 19 </div> 20 <div class="line"></div> 21 <div class="profile-items flex"> 22 <div class="profile-contens flex"> 23 <input 24 type="text" 25 class="profile-item" 26 placeholder="名前" 27 v-model="name" 28 /> 29 </div> 30 <div class="profile-contens flex"> 31 <select 32 class="profile-select" 33 v-model="sex" 34 :style="{ color: sex == '' ? 'gray' : 'white' }" 35 > 36 <option class="profile-item" value hidden>性別</option> 37 <option 38 v-for="sex in sexs" 39 :value="sex.name" 40 :key="sex.id" 41 class="profile-item" 42 style="color: white;" 43 >{{ sex.name }}</option 44 > 45 </select> 46 </div> 47 48         ~ 省略 ~ 49 50 </div> 51 <button 52 class="hide-btn flex" 53 @click=" 54 hide(); 55 closeModal(); 56 " 57 > 58 × 59 </button> 60 </div> 61 <button 62 @click=" 63 updateBtn(); 64 uploadImage(); 65 " 66 class="update-btn flex" 67 > 68 更新 69 </button> 70 </div>

js

1export default { 2 data() { 3 return { 4 name: "", 5 sex: "", 6 sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }], 7 8  ~ 省略 ~ 9 10    uploadedImage: "", 11 open: false, 12 file: "", 13 preview: require("../assets/デフォルトの画像.jpg"), 14 }, 15 components: { 16 Header, 17 List, 18 }, 19methods: { 20 onFileChange(e) { 21 const image = e.target.files; //選択された画像ファイルを選択 22 this.file = image[0]; //画像ファイルを1つだけ選択 23 // Firebase storageに保存するパス乱数で決めてthis.uploadUrlへ代入 24 const S = 25 "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 26 const N = 16; 27 this.uploadUrl = Array.from(crypto.getRandomValues(new Uint32Array(N))) 28 .map((n) => S[n % S.length]) 29 .join(""); 30 let self = this; 31 let fileReader = new FileReader(); 32 fileReader.onload = function() { 33 self.preview = fileReader.result; 34 }; 35 fileReader.readAsDataURL(this.file); 36 }, 37 updateBtn() { 38 this.$swal({ 39 title: "内容確認", 40 text: "この内容で投稿しますか?", 41 icon: "info", 42 buttons: true, 43 dangerMode: true, 44 }).then((willDelete) => { 45 if (willDelete) { 46 let uploadParam = {}; 47 if (this.uploadUrl) { 48 const uploadTask = firebase 49 .storage() 50 .ref() 51        .child(this.uploadUrl) 52 .put(this.file); 53 uploadTask.then(() => { 54 uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => { 55 const uploadedImage = { 56 fileUrl: fileUrl, 57 time: firebase.firestore.FieldValue.serverTimestamp(), 58 }; 59 uploadParam = { uploadedImage: uploadedImage }; 60 }); 61 }); 62 } 63 firebase 64 .firestore() 65 .collection("users") 66 .doc(this.$route.params.uid) 67 .set( 68 { 69 name: this.name, 70 sex: this.sex, 71 age: this.age, 72 access: this.access, 73 selfpr: this.selfpr, 74 profession: this.profession, 75 genre: this.genre, 76 favMovie: this.favMovie, 77 ...uploadParam, 78 time: firebase.firestore.FieldValue.serverTimestamp(), 79 }, 80 { merge: true } 81 ); 82 this.$swal("投稿しました。", { 83 icon: "success", 84 }); 85 this.$router.go({ 86 path: `/mypage/${this.$route.params.uid}`, 87 force: true, 88 }); 89 } else { 90 this.$swal("キャンセルしました。"); 91 } 92 }); 93 },

#追記1

数日解決されなかった為、以下サイトにも掲載させて頂いております。

【Vue x Firestore】画像をアップロードして表示させたいが、Storageに保存されないです。
【Vue x Firestore】画像をアップロードして表示させたいが、Storageに保存されないです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

updateTaskの実行を待つ前にfirebaseの保存処理が走っているため(非同期)、
uploadParam = { uploadedImage: uploadedImage };の直後の処理すると解決いたしました。

updateBtn() { this.$swal({ title: "内容確認", text: "この内容で更新しますか?", icon: "info", buttons: true, dangerMode: true, }).then((willDelete) => { if (willDelete) { let uploadParam = {}; if (this.uploadUrl) { const uploadTask = firebase .storage() .ref(this.uploadUrl) //さっき決めたパスを参照して、 // .child(this.uploadUrl) .put(this.file); //保存する uploadTask.then(() => { uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => { //this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入。 this.$set(this, "uploadedImage", { fileUrl: fileUrl, time: firebase.firestore.FieldValue.serverTimestamp(), }); console.log(fileUrl, this.uploadUrl); uploadParam = { uploadedImage: this.uploadedImage }; //uploadParamへuploadedImageを代入。 firebase //画像をfirestoreに保存 .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, ...uploadParam, time: firebase.firestore.FieldValue.serverTimestamp(), // this.preview = "" //サーバ側で値設定 }, { merge: true } //set()でmergeをtrueにすると、上書き。updetaと同様。 ); const currentUser = firebase.auth().currentUser; currentUser .updateProfile({ photoURL: fileUrl, }) .then(() => { }); // .catch((err)=>{ // console.log(err); // }); }); }); } firebase //画像をfirestoreに保存 .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, ...uploadParam, time: firebase.firestore.FieldValue.serverTimestamp(), //サーバ側で値設定 }, { merge: true } //set()でmergeをtrueにすると、上書き。updetaと同様。 ); console.log(this.uploadedImage); this.$swal("更新しました。", { icon: "success", }); // this.$router.go({ // path: `/mypage/${this.$route.params.uid}`, // force: true, // }); //プロフィール編集されたらページをリロード } else { this.$swal("キャンセルしました。"); } }) .catch(() => { this.$swal("更新出来ませんでした。", { icon: "error", }); }); },

投稿2021/05/31 17:31

m2l

総合スコア318

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

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

0

updateTaskの実行を待つ前にfirebaseの保存処理が走っているため(非同期)、
uploadParam = { uploadedImage: uploadedImage };の直後の処理すると解決いたしました。

uploadParam = { uploadedImage: this.uploadedImage }; //uploadParamへuploadedImageを代入。 firebase //画像をfirestoreに保存 .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, ...uploadParam, time: firebase.firestore.FieldValue.serverTimestamp(), //サーバ側で値設定 }, { merge: true } //set()でmergeをtrueにすると、上書き。updetaと同様。 );

投稿2021/05/30 08:40

TMTN

総合スコア52

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問