gdy_qywx_pc/src/views/integral/avatarUpload.vue

<template>
  <div class="components-container">

    <pan-thumb :image="image" style="margin:auto; display: block;">头像</pan-thumb>

    <div style="text-align: center; padding:30px;">
      <el-button  icon="upload" style="" @click="closeOPen">取消
      </el-button>

      <el-button type="primary" icon="upload" style="" @click="imagecropperShow=true">修改头像
      </el-button>
    </div>


    <image-cropper field="file" :width="300" :height="300" :url="'http://'+'integralsys.oss-cn-shenzhen.aliyuncs.com'" @close='close' @crop-upload-success="cropSuccess" langType="zh"
      :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: 'avatarUpload-demo',
  components: { ImageCropper, PanThumb },
  data() {
    let image = this.$store.getters.user_info.img_url?this.$store.getters.user_info.img_url:this.serverdomain+'static/images/head_default.png'
    return {
      imagecropperShow: false,
      imagecropperKey: 0,
      image: image
    }
  },
  methods: {
    closeOPen() {
      this.$emit('send_success');
    },
    sendAvatarRequest: function (url) {
      let params = {
        employee_id: this.$store.getters.user_info.id,
        url: url
      }

      var self = this;
      this.$http('post','/integral.php/verify/update_avatar',params,'','',
        {transformRequest: [(data) => {
          let paramArray = new Array();
          for (let it in data) {
            paramArray.push(encodeURIComponent(it) + '=' + encodeURIComponent(data[it]));
          }
          return paramArray.join("&");
        }]},
        // headers: {
        //   'Content-Type': 'application/x-www-form-urlencoded'
        // }
      ).then(function (response) {
        let message = "";
        let status = 0;
        if (response.status == 200) {
          let data = response.data;
          status = isNaN(data.status) ? 0 : parseInt(data.status);
          switch (status) {
            case 1:
              message = "修改成功";
              break;
            case -1:
              message = "表单参数错误";
              break;
            default:
              message = data.info ? data.info : "未知错误";
          }
        } else {
          message = "服务器出现问题";
        }
        self.$message({
          message: message,
          type: status == 1 ? 'success' : 'error'
        });
      }).catch(function (error) {
        console.log(error);
      });
    },
    cropSuccess(resData) {
      console.log(resData)
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.image = resData.url
      this.$store.getters.user_info.img_url = this.image
      //更新头像

      this.sendAvatarRequest(this.$store.getters.user_info.img_url)
    },
    close() {
      this.imagecropperShow = false
    }
  },
  created(){
    this.$store.dispatch('setLanguage', 'zh')
  }
}
</script>

<style scoped>
  .avatar{
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
</style>