个人中心修改用户头像

今天我来记录一下修改用户头像的方法，当然啦，这是我第一次实现这个功能，方法不成熟，多多包涵～～～

这个需求是基于nuxt实现的，首先我来说一下需要下载的插件。修改用户头像肯定要能裁剪头像的大小，需要用到的插件就是vue-cropper。

第一步：下载vue-cropper依赖

npm install vue-cropper

第二步：需要在plugins文件夹下新建一个cropper.js的文件，然后写下如下代码：

import Vue from 'vue'
import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

第三步：找到nuxt.config.js文件引入插件

plugins: [
 { src: '@/plugins/cropper', ssr: false }
]

当然啦，以上步骤只适用于用nuxt搭建项目的小伙伴。

前戏结束，接下来才是重头戏

前面的样式就不说了，我这里上传文件的方式用的是这个组件，需要让它不显示。为什么？在这里我们需要由它来触发上传文件的方法，但是我们不需要一个输入框。

<input
 ref="avatarInput"
 type="file"
 style="display: none;"
 @change="handleChangeAvatar"
/>

上传头像的家伙我们已经准备好了，然后我们在更换头像这里添加一个click事件

doChoiceAvatar() {
 this.uploadModalVisible = false // 控制el-dialog弹窗不显示
 this.$refs.avatarInput.click() // 调用input上传文件的方法
}

好，我们得到了这个弹窗

 我们上传头像当然要查看我们的头像显示的如何，并加以修改。所以接下来就开始用到我们刚刚下载的VueCropper组件了。我这里用的element-ui里面的Dialog弹窗，关于el-dialog的知识我就不过多介绍了(element-ui官网欢迎你)。

<el-dialog
 class="upload-avatar-dialog"
 :visible.sync="uploadModalVisible"
 width="350px"
 :close-on-click-modal="false"
>
  <VueCropper
   ref="cropperAvatar"
   class="avatar-cropper"
   style="height: 250px"
   :img="imgData"
   :output-size="outputSize"
   :output-type="'outputType'"
   :fixed-number="fixedNumber"
   :auto-crop="autoCrop"
   :fixed="fixed"
   :center-box="true"
   :info="false"
   :info-true="true"
   :fixed-box="true"
   :can-move-box="false"
   @touchmove.prevent
  ></VueCropper>
  <span slot="footer" class="dialog-footer">
  <el-button @click="cancelConfig">取消</el-button>
  <el-button type="primary" @click="okConfig">裁剪头像</el-button>
 </span>
</el-dialog>

以上步骤做完，我们会得到一个类似这样的弹窗

 但是是一个没有图片的弹窗，因为我们还没有把刚刚上传的图片信息传递给这个VueCropper组件。我们刚刚在那个上传文件的input输入框上面绑定的方法在这里就用到了，这里我们就把上传的图片信息赋值给imgData

handleChangeAvatar(e) {
 const files = e.target.files
 if (files && files.length > 0) {
  const file = files[0]
  const name = file.name.toLowerCase()
  if (
   name.endsWith('.png') ||
   name.endsWith('.jpeg') ||
   name.endsWith('.jpg') ||
   name.endsWith('.gif') ||
   name.endsWith('.svg')
  ) { // 校验上传文件格式，必须为图片类型
   const reader = new FileReader()
   reader.readAsDataURL(file)
   reader.onloadend = () => {
   this.imgData = reader.result
  }
   this.uploadModalVisible = true
  } else {
   this.$message({
    message: '上传头像失败',
    type: 'warning'
   })
  }
 } else {
  this.imgData = ''
 }
}

没错，它会在这里读取你刚保存的图片信息，然后显示在页面上

 这些工作做完了之后，肯定需要调用接口哇，把我们上传的头像保存在服务器里

uploadFile(file, fileName, resolve) {
 // 上传头像
 const formData = new FormData()
 formData.append('file', file)
 const request = {
  ...apis.UPLOAD_AVATAR,
  headers: {
   'Content-Type': 'multipart/form-data'
  }
 }
 request.data = formData
 this.$axios(request).then((res) => {
  if (res.data.code) {
   this.certificationInfo.avatarUrl = res.data.data // 得到用户头像
   resolve(false)
  }
 })
}

然后点击剪裁头像，关闭弹窗头像上传成功

okConfig() {
 this.uploadModalVisible = false
 return new Promise((resolve, reject) => {
  // 获取截图的base64 数据
  this.$refs.cropperAvatar.getCropData((data) => {
   let outputData, fileName
   const file = this.getAvatarFile()
   // eslint-disable-next-line prefer-const
   fileName = file ? file.name : 'temp.' + this.outputType
   if (this.outputDataType === 'file') {
    if (this.isIe) {
     outputData = blobToFile(dataURLtoBlob(data), fileName)
    } else {
     outputData = dataURLtoFile(data, fileName)
    }
   } else {
    outputData = data
   }
   this.uploadFile(outputData, outputData.size, resolve)
  })
 })
}

这样就成功的把头像上传了。

如果有更好的方法，欢迎告诉我呦，我们一起来进步