1. api 接口核心代码

// 更新用户头像的操作函数
exports.updateAvatar = (req,res)=>{
  // 定义sql ：根据用户 id 更改 头像
  const sql = 'update users set avatar = ? where id =?'
  // 头像在服务器端的存放路径
  const img = path.join('/uploads', req.file.filename)

  db.query(sql,[img,req.user.id],(err,result)=>{
    if(err) return res.cc(err)
    if(result.affectedRows !== 1) return res.cc('更新头像失败！')
    res.cc('更新头像成功',0)
  })
}

2.  文件上传代码

         <el-upload
            class="avatar-uploader"
            action
            :http-request="uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <p>点击上传头像</p>
          </el-upload>

3. 验证图片格式

// 验证上传的图片文件
    beforeAvatarUpload (file) {
      // 判断图片格式是否合格
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },

4. 调用接口修改头像

// 调用接口上传用户头像
    async uploadFile (item) {
      const formData = new FormData()
      // 这里要注意了，‘avatar’ 这里 要看 api 接口那边传的文件参数名称是什么，这里就写什么
      // 我就是在这里耽误很长的时间
      formData.append('avatar', item.file)

      const res = await uploadFile(formData)
      if (res.status !== 0) {
        return this.$Message.error('修改头像失败！')
      }
      this.$Message.success('修改头像成功！')
    },