在 Firebase + Vue + Quasar Framework 中更改个人资料图片

Posted 2023-02-22

【中文标题】在 Firebase + Vue + Quasar Framework 中更改个人资料图片

【英文标题】：Change profile picture in Firebase + Vue + Quasar Framework

【发布时间】：2020-05-19 06:02:53

【问题描述】：

我正在尝试在单击保存按钮时更改用户的个人资料图片，我的模板如下所示：

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

您使用mapActions 调用saveUsersProfile 操作，但没有映射它。基本上，这意味着您的操作将被称为没有有效负载（我相信它将设置为）。因此，payload[0] 的计算结果为 undefined。当尝试调用.name 时，它会抛出你得到的这个错误。

你需要映射你的行动。

来自here：

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();
    ...

祝你好运

【讨论】：

已经完成了，谢谢。但请检查我谈到的错误

好吧，您使用mapActions 调用saveUsersProfile 操作而不映射它。基本上，这意味着您的操作将被调用没有有效负载（这意味着它将被设置为 我相信）。因此，payload[0] 的计算结果为 undefined。当尝试调用.name 时，它会抛出你得到的这个错误。

我正在尝试读取文件并获取其扩展名。我很困惑

您只是没有将参数传递给您的操作。我编辑了我的答案，试试这个。

它现在以正确的文件类型保存到 Firebase 存储中。谢谢