chat/_src/components/popup/avatar/index.vue

<template>
  <transition name="msgbox-fade">
    <div class="pub-wrapper" v-if="visible">
      <div class="pub-mask" @click="visible = false"></div>
      <div class="pub-modal avater-modal">
        <div class="modal-hd">
          <div class="title">
            {{isMe ? $t('userinfo.editAvatar') : $t('userinfo.editGroupAvatar') }}
          </div>
          <i class="el-icon-close" @click="visible = false"></i>
        </div>
        <div class="modal-bd">
          <el-upload
            class="avatar-uploader"
            accept="image/*"
            :action="uploadUrl"
            :show-file-list="false"
            :data="uploadData"
            :on-success="handleAvatarSuccess"
            name="cover_photo"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="modal-fd">
          <!-- <el-button type="primary">确认</el-button> -->
          <el-button @click="visible = false">{{$t('public.cancel')}}</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { Button, Upload, Message } from 'element-ui'
import Vue from 'vue'

Vue.component(Button.name, Button)
Vue.component(Upload.name, Upload)
Vue.component(Message.name, Message)

export default {
  name: 'avatarPopup',
  data () {
    return {
    }
  },
  computed: {
    uploadUrl () {
      let host = ''
      let userId = localStorage.getItem('user_id')
      let token = localStorage.getItem('token')
      if (window.location.port === '8080') {
        host = '//test.mee.chat/'
      }
      return this.isMe ? `${host}user/changePhoto?user_id=${userId}&token=${token}` : `${host}group/changeCover?user_id=${userId}&token=${token}`
    },
    uploadData () {
      let authData = {
        user_id: this.$store.state.userId,
        token: this.$store.state.token
      }

      return this.isMe
        ? authData
        : Object.assign(authData, { group_id: this.$store.state.curSession })
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.$showTips(this.$t('public.uploadSucc'))
      if (this.isMe) {
        // 用户头像
        this.$store.commit('updateUserPhoto', this.imageUrl)
        this.$store.commit('updateMemberInfo', {
          userId: this.$store.state.userId,
          imageUrl: this.imageUrl
        })
      } else {
        // 群头像
        this.$store.dispatch('updateSessionItem', {
          sessionId: this.$store.state.curSession,
          data: {
            cover_photo: this.imageUrl
          }
        })

        this.$store.commit('updateGroup', {
          key: 'coverPhoto',
          data: this.imageUrl
        })
      }
    },
    beforeAvatarUpload (file) {
      const isIMG = file.type.indexOf('image') > -1
      const isLt1M = file.size / 1024 / 1024 < 2
      if (!isIMG || !isLt1M) {
        this.$showTips(this.$t('userinfo.maxUploadTips'))
      }
      return isIMG && isLt1M
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>