【Vue x Firestore】プロフィール情報の変更時、画像を新しく選択しないと更新が出来ないので改善したい。

Question

#プロフィール情報の変更時、画像を新しく選択しないと更新が出来ないので改善したい。

現状下記のようなエラーが出てしまっております。
エラー内容を確認しても原因がわからず困っています。

分かる方いらっしゃいましたらお力添えをいただきたいです。
よろしくお願い致します。

---

[Vue warn]：v-onハンドラーのエラー： "FirebaseError：Firebase Storage：操作 'put'はルート参照で実行できません。子を使用して非ルート参照を作成してください、.child（ 'file.png'）。（storage / invalid-root-operation）など

---

FirebaseError：Firebase Storage：操作 'put'はルート参照に対して実行できません。.child（ 'file.png'）などの子を使用して非ルート参照を作成してください。 （ストレージ/無効なルート操作）

　　　　　<button
            @click="
              show();
              openModal();
            "
            class="profile-edit flex"
          >
            プロフィール編集
          </button>
          <modal
            class="modal-inner"
            v-scroll-lock="open"
            name="edit"
            :width="1100"
            :height="740"
          >
            <div data-modal="edit" aria-expanded="true" class="vm--overlay">
              <div class="vm--top-right-slot"></div>
            </div>
            <div class="modal-header flex">
              <h2 class="profile-tll flex">プロフィールを編集する</h2>
              <hr class="separate" />
            </div>
            <div class="modal-body">
              <div class="profile-inner flex">
                <div class="profile-contens flex">
                  <div class="profile-img-inner flex">
                    <img
                      :src="
                        uploadedImage == '' ? preview : uploadedImage.fileUrl
                      "
                      width="200"
                      height="200"
                      class="profile-img"
                      alt="プロフィール画像"
                    />
                    <label class="profile-txt profile-update">
                      プロフィール画像を編集する
                      <input
                        type="file"
                        @change="onFileChange"
                        style="display:none"
                      />
                    </label>
                  </div>
                  <div class="line"></div>
                  <div class="profile-items flex">
                    <div class="profile-contens flex">
                      <input
                        type="text"
                        class="profile-item"
                        placeholder="名前"
                        v-model="name"
                      />
                    </div>

               ~ 省略 ~            

                <button
                  @click="
                    updateBtn
                  "
                  class="update-btn flex"
                >
                  更新
                </button>
              </div>

methods: {
    onFileChange(e) {
      const image = e.target.files;
      this.file = image[0];

      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.onload = function() {
        self.preview = fileReader.result;
      };
      fileReader.readAsDataURL(this.file);
    },
    updateBtn() {
      const uploadTask = firebase
        .storage()
        .ref(this.uploadUrl) 
        .put(this.file); 

      uploadTask.then(() => {
        uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => {
          const uploadedImage = {
            fileUrl: fileUrl,
            time: firebase.firestore.FieldValue.serverTimestamp(),
          };
          firebase
            .firestore()
            .collection("users") 
            .doc(this.$route.params.uid) 
            .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 }
            );
          this.$swal({
            title: "内容確認",
            text: "この内容で投稿しますか？",
            icon: "info",
            buttons: true,
            dangerMode: true,
          }).then((willDelete) => {
            if (willDelete) {
              this.$swal("投稿しました。", {
                icon: "success",
              });
              this.$router.go({
                path: `/mypage/${this.$route.params.uid}`,
                force: true,
              });
            } else {
              this.$swal("キャンセルしました。");
            }
          });
        });
      });
    },

#追記

Answer 1

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

こちらで行けると思います。

詳細はfirebaseのサンプルコードを参照してください。
https://firebase.google.com/docs/storage/web/upload-files?hl=ja

Comments

[TMTN]

ご回答ありがとうございます。

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

上記のようにしましたが、追記としてスクショを再度掲載させていただきましたが、定義もしていない「未定義のプロパティ 'split'を読み取れません"」といエラーが出ました・・コード内で調べてもどこにも定義していないです。。

[Arahabica]

this.uploadUrlがundefinedになってるかもしれません。

console.log(this.uploadUrl)

などで確認してみてください。

[TMTN]

本件につきましては解決と致しましたのでベストアンサーとさせて頂きます。

エラーにつきましては引き続き調べてみます。
ご回答いただきありがとうございました。