vant中如何修改用戶的頭像

更新時(shí)間：2022年08月11日 09:42:01 作者：A黃俊輝A

這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant修改用戶的頭像

我們的項(xiàng)目中經(jīng)常會(huì)遇到用戶個(gè)人信息的修改，當(dāng)然用的組件就是 vant 中的 van-uploader 組件，但是這個(gè)組的是有一個(gè)回顯功能的，它的樣式不太符合我們，更改用戶頭像的場(chǎng)景

對(duì)比一下

van-uploader 的本來的樣式是這樣的

而我們需要修改用戶頭像的樣式是這樣的

我們的需求就是上傳完圖像之后，再次點(diǎn)擊頭像，還可以再次上傳一個(gè)新的頭像，這樣的需求， van-uploader 中的 fileList是實(shí)現(xiàn)不了的

那么我是怎么實(shí)現(xiàn)這個(gè)功能的呢？

我沒有使用 van-uploader 的 fileList 屬性，我使用的它的一個(gè) slot 的插槽功能

圖中的 van-image 的src 是寫死了的，它可以通過接口請(qǐng)求返回的數(shù)據(jù)來改變。會(huì)的都會(huì)，不用多說

這樣就實(shí)現(xiàn)我們的想要的功能

vant實(shí)現(xiàn)純客戶端用戶頭像上傳預(yù)覽

<style lang="less" scoped>
.EditUserINfo {
  .avatar {
    width: 30px;
    height: 30px;
  }
  /* 樣式穿透 */ 
  /deep/ .van-image-preview__cover{
    /* 取消樣式設(shè)置 */
    top: unset;
    left: 0;
    right: 0;
    bottom: 0;
    .van-nav-bar{
      background: #000;
    }
  }
}
</style>

<template>
  <div class="EditUserINfo">
    <van-nav-bar title="編輯資料" left-arrow @click-left="$router.back()"></van-nav-bar>
    <van-cell-group>
      <van-cell title="頭像" is-link @click="onAvatarClick">
        <van-image class="avatar" round :src="user.photo" />
      </van-cell>
      <!-- 表單元素的hidden屬性：隱藏表單元素 -->
      <input type="file" hidden ref="file" @change="onFileChange" />
      <van-cell title="昵稱" is-link :value="user.name"></van-cell>
      <van-cell title="介紹" is-link value="內(nèi)容"></van-cell>
      <van-cell title="性別" is-link :value="user.gender===0?'男':'女'"></van-cell>
      <van-cell title="生日" is-link :value="user.birthday"></van-cell>
    </van-cell-group>
    <!-- 頭像預(yù)覽,預(yù)覽關(guān)閉文件重置 -->
    <van-image-preview v-model="isPreviewShow" :images="images" @close="$refs.file.value=''">
      <!-- 插入插槽cover -->
      <van-nav-bar
        slot="cover"
        left-text="取消"
        right-text="確定"
        @click-left="isPreviewShow=false"
        @click-right="onUpdateAvatar"
      />
    </van-image-preview>
  </div>
</template>
 
<script>
export default {
  name: "EditUserINfo",
  components: {},
  props: {},
  data() {
    return {
      user: {
        photo: "https://img.yzcdn.cn/vant/cat.jpeg",
        name: "凱文",
        gender: "男",
        birthday: "1996-12-18"
      }, //用戶信息
      isPreviewShow: false,
      images: [] //預(yù)覽圖片列表
    };
  },
  watch: {},
  computed: {
    file() {
      return this.$refs["file"];
    }
  },
  methods: {
    onAvatarClick() {
      this.file.click();
    },
    onFileChange() {
      // 1.拿到file類型input選擇的文件對(duì)象
      const fileObj = this.file.files[0];
      // 2.使用window.URL.createObjectURL(file)得到文件數(shù)據(jù)
      const fileData = window.URL.createObjectURL(fileObj);
      // 3.將img.src = 第2步的結(jié)果
      this.images = [fileData];
      this.isPreviewShow = true;
    },
    onUpdateAvatar() {
      // 1.構(gòu)造包含文件數(shù)據(jù)的表單對(duì)象
      // 注意：含有文件的服務(wù)務(wù)必要放到FormData中
      // 用代碼來構(gòu)造一個(gè)表單對(duì)象，主要目的是用來異步發(fā)送文件上傳
      // 參數(shù)一：鍵
      // 參數(shù)二：值
      const fd = new FormData()
      fd.append('photo',this.file.files[0])
      this.$toast.loading({
        duration: 1000,
        message:'保存中',
        forbidClick:true
      })
      this.isPreviewShow =false
      //this.$toast.success('保存成功')
    }
  },
  created() {},
  mounted() {}
};
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: