プロフィール画像を選択後、選択した画像を表示させる
◆参考記事：Vue.jsは気難しい（オブジェクト編）
以下ではプロフィール画像とプロフィール情報を設定しております。
<script>
export default {
data() {
return {
name: "",
~ 省略 ~
preview: "",
uploadedImage: {
fileUrl: require("../assets/デフォルトの画像.jpg"),
time: null,
}
};
},
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) //さっき決めたパスを参照して、
.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(),
//サーバ側で値設定
},
{ merge: true }
//set()でmergeをtrueにすると、上書き。updetaと同様。
);
const currentUser = firebase.auth().currentUser;
currentUser
.updateProfile({
photoURL: fileUrl,
})
.then(() => { })
.catch(()=>{
});
});
});
}
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と同様。
);
this.$swal("更新しました。", {
icon: "success",
});
} else {
this.$swal("キャンセルしました。");
}
})
.catch(() => {
this.$swal("更新出来ませんでした。", {
icon: "error",
});
this.preview = ""
//更新をキャンセルした場合、空にする。
});
},
created() {
const currentUser = firebase.auth().currentUser;
this.uid = currentUser.uid;
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.$set(this, "uploadedImage",this.profileData.uploadedImage || this.uploadedImage);
//変更検知がvue側行わせる為に上記を追記。
this.genre = this.profileData.genre || "";
this.favMovie = this.profileData.favMovie || "";
//全てのデータを取得して、profileDataへ代入。
});
}
},
変更検知をvue側に行わせる為にset()を使用してキー追加すると、検知機構を持つプロパティに変換される。
※ここで記載しているthisはコンポーネントのことです。
this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入する際
uploadTask.then(() => {
uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => {
this.$set(this, "uploadedImage", {
fileUrl: fileUrl,
time: firebase.firestore.FieldValue.serverTimestamp(),
});
プロフィール情報及びプロフィール画像を取得する際
this.$set(this, "uploadedImage",this.profileData.uploadedImage || this.uploadedImage);
検知機構を持たせたい箇所にはset()を使用すると変更検知をvue側に行わせることが出来ます。