员工 - 头像

一、存储头像思路

为了节省公司服务器内存，采用腾讯云服务器存储用户头像后返回头像所在地址进行复现。

 1.1 创建腾讯云存储桶

进入云产品 => 基础存储服务 => 对象存储后创建存储桶

1.2 存储桶跨域cors请求配置

桶=> 安全管理 =>跨域访问设置

由于我们单纯测试 请求来源配置为 * 

 二、实现头像上传

采用element Upload 上传组件；

使用 腾讯云 JavaScript SDK 开发 npm i cos-js-sdk-v5 --save 

2.1 组件封装

 在 src\components\UpLoadPhoto\ 下创建

<template>
  <div>
    <el-upload class="avatar-uploader" :before-upload="beforeAvatarUpload" :http-request="putPhoto">
      <!-- 
      传入文件框
        有图片地址显示预览图片无则显示 + 号
      -->
      <div v-if="isLoading">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100%" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </div>
      <!-- 进度条 -->
      <el-progress v-else type="circle" :percentage="percent" class="progress"></el-progress>
    </el-upload>
  </div>
</template>

2.2 配置sdk实例

var COS = require('cos-js-sdk-v5')
var cos = new COS({
  // 密钥id/key
  SecretId: 'AKIDzrgKo7C5lDF3d6MQIvKSN3aFvSxFKBn9',
  SecretKey: 'GKCsU7qQlu15x38OYcUCoJclUAh7Lslf',
})

2.3 自定义Upload 组件上传处理

:before-upload 使用自定义上传处理函数，覆盖默认上传处理函数。

    <el-upload class="avatar-uploader" :before-upload="beforeAvatarUpload" :http-request="putPhoto">

 采用 cos.putObject api 简单上传图片

对象存储 上传对象-SDK 文档-文档中心-腾讯云

 putPhoto (parmas) {
      // putObject 简单上传
      cos.putObject({
        Bucket: 'photo-1319810634', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-nanjing',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: parmas.file.name,  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD', // 此类写死
        Body: parmas.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        // 进度的回调函数，progressData为进度回调响应对象
        onProgress: (progressData) => {
          this.isLoading = false
          this.percent = parseInt(progressData.percent) * 100
        }
      }, //上传完成的回调
        (err, data) => {
        setTimeout(() => {
          this.isLoading = true
        }, 1000)
        // 上传成功后保存图片在服务器的地址
        this.imageUrl = 'https://' + data.Location
      })
    },

2.3 保存用户头像更新用户信息

#个人详情页 点击保存触发

async saveUser () {
      // 携带头像地址发送请求
      this.userInfo.staffPhoto = this.$refs.UpLoadPhoto.imageUrl
      let { message } = await SaveEmployee(this.$route.query.id, this.userInfo)
      this.$message(message)
    }

2.4 头像回显

#个人详情页

 

async created () {
    let { data } = await getUserStaffPhoto(this.$route.query.id)
    // 已经具有头像的用户在此页面加载时将头像地址赋值给UpLoadPhoto组件实现回显。
    this.$refs.UpLoadPhoto.imageUrl = data.staffPhoto ? data.staffPhoto : ''
    this.userInfo = data
    // 转数字 => 回显对应的选项 
    this.$set(this.userInfo, 'formOfEmployment', parseInt(this.$route.query.formOfEmployment))
  },

2.5 主页列表头像展示

<el-table-column label="头像" prop="staffPhoto">
            <template v-slot="{row}">
              <!-- 无头像用户配置默认头像 -->
              <el-image :src="row.staffPhoto" alt class="elImage">
                <template slot="error">
                  <img src="../../assets/morentx.jpg" alt width="100%" />
                </template>
              </el-image>
            </template>
</el-table-column>

2.6 头像上传进度条

<template>
  <div>
    <el-upload class="avatar-uploader" :before-upload="beforeAvatarUpload" :http-request="putPhoto">
      <!-- 
      传入文件框
        有图片地址显示图片无则显示 + 号
      -->
      <div v-if="isLoading">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100%" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </div>
      <!-- 
        进度条
            percentage:进度百分比
      --> 
        
      <el-progress v-else type="circle" :percentage="percent" class="progress"></el-progress>
    </el-upload>
  </div>
</template>

cos.putObject({
        Bucket: 'photo-1319810634', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-nanjing',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: parmas.file.name,  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD', // 此类写死
        Body: parmas.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        // 进度的回调函数，进度回调响应对象
        onProgress: (progressData) => {
          this.isLoading = false
          // 转换进度后赋值
          this.percent = parseInt(progressData.percent) * 100
        }
      }, (err, data) => {
        setTimeout(() => {
          this.isLoading = true
        }, 1000)
        this.imageUrl = 'https://' + data.Location
      })
    },