Изменить профиль Изображение в Firebase + Vue + Quasar Framework - PullRequest
Новая
       25

Изменить профиль Изображение в Firebase + Vue + Quasar Framework

0 голосов
/ 03 февраля 2020

Я пытаюсь изменить изображение профиля пользователя при нажатии кнопки сохранения, мой шаблон выглядит следующим образом: 

<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>

В разделе «Мой сценарий» 

<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)

Я не знаю, почему не удалось получить расширение файла. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 03 февраля 2020

Вы вызываете действие saveUsersProfile, используя mapActions, но не отображая его. По сути, это означает, что ваши действия будут называться без полезной нагрузки (оно будет установлено на {}, я полагаю). Таким образом, 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();
    ...

Удачи

...