封装组件——头像上传

霞霞哇

已于 2022-09-26 16:43:07 修改

阅读量588

点赞数

分类专栏： javaScript vue.js 文章标签： javascript 前端 vue.js 腾讯云

于 2022-06-14 23:02:41 首次发布

本文链接：https://blog.csdn.net/weixin_67340539/article/details/125285611

版权

vue.js 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

javaScript

9 篇文章 1 订阅

订阅专栏

这是一个业务相关组件——与具体的项目紧密相关，可能会在项目中多次使用

前言

这里的用户头像显示是另外封装了一个组件作为子组件——/UploadImg/index.vue

用户个人详情的组件为父组件——user-info.vue

*上面的两个代码放在了文章的结尾处（仅供参考）

1.2 根据 id 跳转当前点击的用户页面

二、v-model双向绑定和prop:value传值给子组件

三、调用腾讯云的api上传图片到腾讯云并返回图片url地址

3.1 调用腾讯云的api上传图片到腾讯云

流程图

流程图详解

一、根据 id 获取用户信息（头像地址）

1.1 点击查看获取用户信息（id）

1.2 根据 id 跳转当前点击的用户页面

**这里跳转到 detail 是因为其中导入了包含个人详情的 user-info组件

二、v-model双向绑定和prop:value传值给子组件

在父组件中：给子组件 v-model双向绑定用户头像地址

在子组件中：用props接收图片地址value，并与img标签的src属性绑定

三、调用腾讯云的api上传图片到腾讯云并返回图片url地址

3.1 调用腾讯云的api上传图片到腾讯云

3.2 返回图片url地址

四、子传父

在子组件中：用户上传图片到腾讯云成功后返回一个url，使用 $emit 将图片地址url（这里是location）传给父组件，触发 input事件

在父组件中：接收子组件传过来的图片地址

*这里使用了 v-model 双向绑定，所以将传过来的图片地址存储在了 ueserInfo.staffPhoto 中

五、将新地址保存到自己的服务器

代码（仅参考）

父组件——user-info

<template>
  <div class="user-info">
    <!-- 个人信息 -->
    <el-form ref="userForm" :model="userInfo" label-width="220px">
      <!--手机 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="手机">
            <el-input v-model="userInfo.mobile" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 工号 入职时间 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              class="inputW"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 员工照片 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="员工头像">
            <!-- <img :src="userInfo.staffPhoto"> -->
            <!-- 子组件——放置上传图片 -->
            <!-- 在main.js中全局注册了，这里可直接使用 -->
            <upload-img
              ref="staffPhoto"
              v-model="userInfo.staffPhoto"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 保存个人信息 -->
      <el-row class="inline-info" type="flex" justify="center">
        <el-col :span="12">
          <el-button type="primary" @click="hSave">保存更新</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getUserDetailById, saveUserDetailById } from '@/api/user.js'

export default {
  data() {
    return {
      userInfo: {
        id: this.$route.query.id,
        mobile: '',
        timeOfEntry: '',
        staffPhoto: '' // 头像
      }
    }
  },
  created() {
    this.loadUserDatailById()
  },
  methods: {
    async loadUserDatailById() {
      const res = await getUserDetailById(this.userInfo.id)
      console.log('获取个人信息', res)
      this.userInfo = res.data
    },
    async doSave() {
      try {
        const res = await saveUserDetailById(this.userInfo)
        console.log('保存个人信息之后的结果是', res)
        // 1. 提示
        this.$message.success('保存成功')
        // 2. 回到列表页
        this.$router.back()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    hSave() {
      // 兜底校验
      this.$refs.userForm.validate(valid => {
        valid && this.doSave() // 校验通过，执行保存函数
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .user-info{
    padding-top:20px;
  }
</style>

子组件——/UploadImg/index.vue

<template>
  <div>
    <!--
      show-file-list: 是否显示上传的文件列表
      action: '#' 用来指定文件要上传的地址，由于我们需要定制上传动作
              这里设为#
      :http-request：自定义上传行为（重点，在这里写代码把图片上传腾讯云）

      on-success: 上传成功之后的回调
      before-upload： 上传之前的检查
    -->
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :http-request="upload"
      :before-upload="beforeAvatarUpload"
    >
      <!-- 如果有图就显示img，否则显示一个加号图标i -->
      <img v-if="value" :src="value" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'AKID50f4D5fy0lGUQ6VcS2LN8cqnSqxnLcdN', // 身份识别ID
  SecretKey: 'TgbFdjY7PP8bniMnxqSmqYz93g15zcy3' // 身份秘钥
})

export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    // 上传图片到 腾讯云
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    },
    // 自定义的上传的动作
    upload(res) {
      // res.file就是我们当前要上传的文件
      // 写代码把图片上传腾讯云
      console.log(res.file)

      cos.putObject({
        Bucket: 'xiaxia-1312480396', /* 存储桶 */
        Region: 'ap-chongqing', /* 存储桶所在地域，必须字段 */
        Key: res.file.name, /* 文件名 */
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: res.file // 上传文件对象
      }, (err, data) => {
        console.log('传输是否成功', err || data)
        // 上传成功之后
        if (data.statusCode === 200) {
          // `https:${data.Location}` 就是新的图片上传到存储桶之后的地址
          // 回传给父
          this.$emit('input', `https:${data.Location}`)
        }
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>