博客门户用户信息头像修改

前言，我的博客也是前些日子才完工的，但是我想着有些地方优化一下，首先是门户个人信息的头像，不然注册的用户清一色的头像，就做了一下门户个人信息的头像修改，这里遇到的一些坑记录一下。

一、准备工作

使用管理端个人信息的头像修改组件，github地址：https://github.com/dai-siki/vue-image-crop-upload

二、去参考管理端代码

我一开始以为很简单，于是毫不费劲的就把代码copy完了，以为完事，然后刷新一下，error，程序员最怕的字眼，如图：

然而发现事情并没有想象的那么简单，找了半天想去群里问一下，然后群里也没大神回我，再翻看一遍，似乎记起来了些什么，对，组件注册方式不一样。

三、修改代码

首先plugins目录下创建一个avatar-upload.js文件，注册组件

import Vue from 'vue';
import avatarUpload from 'vue-image-crop-upload/upload-2.vue'

Vue.component('avatar-upload', avatarUpload)

第二步，再去配置文件nuxt.config.js配置如下代码：

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    {
      src: '@/plugins/avatar-upload',
      ssr: false
    }
  ],

到这就改的差不多了。

四、完整的代码

html代码

<template>
  <div class="change-avatar-dialog">
      <avatar-upload field="file"
                     @crop-upload-success="cropUploadSuccess"
                     @crop-upload-fail="cropUploadFail"
                     v-model="showAvatarCutter"
                     :width="300"
                     :height="300"
                     url="/admin/image/avatar"
                     img-format="png">
      </avatar-upload>
    </div>
</template>

<script type="text/javascript">
export default {
  data(){
    return{
		showAvatarCutter: false,
	  }
	},
  methods:{

    /**
     * 上传完成再去更新数据
     */
        cropUploadSuccess(response){
      // console.log(response);
      // console.log(field);
      //上传成功
      if (response.code === api.SUCCESS_CODE_200) {
        this.userEntity.avatar = response.path;
        this.userInfo.avatar = response.path;
        this.$message.success('头像上传成功!');
        // this.showAvatarCutter = false;  //不能这样关闭,需要使用定义好的关闭
        console.log("头像 ===> " + this.userEntity.avatar)
      }else {
        this.$message.error('头像上传失败!');
      }
    },

    cropUploadFail(){
      this.$message.error("上传失败!")
    },

    showAvatarDialog(){
      // 本人才能修改自己的头像
      if (this.currentUserId === this.parUserId){
        // console.log("点击....")
        this.showAvatarCutter = true;
        this.isEditorMode = true;
      }
    },
  }
}
</script>

<style></style>

基本上都在上面了，要注意的地方就是注册组件！（完结）