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

#画像をアップロードして表示させたいが、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に保存されないです。

行動規範の内容に同意します

回答2件

ベストアンサー

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

 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

総合スコア53