Firebase + Vue + Quasar Framework에서 프로필 사진 변경

Firebase + Vue + Quasar Framework에서 프로필 사진 변경

저장 버튼을 클릭했을 때 사용자의 프로필 사진을 변경하려고 하면 템플릿이 다음과 같이 나타납니다.

<q-file
  v-model="file"
  label="Pick one file"
  class="text-center"
  use-chips
  accept=".jpg, image/*"
  style="width: 200px"
 />
   <q-btn flat class="text-primary" @click="saveUsersProfile(file)">
     Save
   </q-btn>

[ My Script ]섹션:

<script>
import { mapActions } from "vuex";

export default {
  name: "profile",
  data: () => ({
    file: null
  }),
  computed: {
    ...mapActions("store", ["saveUsersProfile"])
  },

Store.js

//Let users change Profile Picture
  saveUsersProfile({}, payload) {
    // Get the File
    const file = payload[0];
    const extension = file.name.split(".").pop();
    const uploadDate = new Date();
    const fileName = `${firebaseAuth.currentUser.uid}-${uploadDate.toDateString()}.${extension}`;
    firebaseStorage
      .ref(`users/profile/${fileName}`)
      .put(file)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });

콘솔 오류:

Error in v-on handler: "TypeError: Cannot read property 'name' of undefined"

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'name' of undefined
    at Store.saveUsersProfile (store.js?07a4:122)

왜 파일 확장자를 얻을 수 없었는지 모르겠어요.

당신이 전화하세요.saveUsersProfile를 사용한 동작mapActions맵핑은 하지 않습니다.기본적으로는 payload 없이 액션이 호출됨을 의미합니다(로 설정됩니다).{}나는 믿는다).따라서,payload[0]까지 평가하다.undefined전화를 걸려고 할 때.name이 에러가 발생합니다.

액션 맵을 작성해야 합니다.

여기서부터:

mapActions는 작업을 매핑합니다.

이 명령어는 사용자를 위해 단축형을 만들고, 그 후에 다른 일반 메서드와 마찬가지로 메서드를 호출합니다....mapActions('auth', ['login'])

this.$store.dispatch('auth/login', yourPayload)

와 동등하다

this.login(yourPayload)

이 경우 스크립트세션에 메서드를 추가해야 합니다.

<script>
import { mapActions } from "vuex";

export default {
  name: "profile",
  data: () => ({
    file: null
  }),
  methods: {
    ...mapActions("store", ["saveUsersProfile"]),

    saveUsersProfile({name}),
},

스토어의 경우:

//Let users change Profile Picture
  saveUsersProfile({}, payload) {
    // Get the File
    const file = payload; // I don't understand why you need [0], but maybe I'm wrong
    const extension = file.name.split(".").pop();
    ...

행운을 빌어요

언급URL : https://stackoverflow.com/questions/60039954/change-profile-picture-in-firebase-vue-quasar-framework