2021-04-25

员工详情里面的上传图片功能

1.这里使用ref来引用这个子组件

<!--员工头像-->
<el-row class="inline-info">
<el-col :span="12">
<el-form-item label="员工头像">
<upload-image ref="staffPhoto" />
</el-form-item>
</el-col>
</el-row>

2.初始时显示：回填头像

把图片显示在子组件中

import { getUserDetailById } from '@/api/user'
export default{
created(){
this.loadUserDetailById()
},
async loadUserDetailById(){
const rs=await getUserDetailById(this.UserId)
console.log('获取个人信息',rs)
this.userInfo=rs.data

//把头像地址 给子组件显示出来
this.$refs.staffPhoto.imageUrl=rs.data.staffPhoto
}

3.更新数据

从子组件中获取上传之后的图片地址，做保存

import { saveUserDetailById } from '@/api/employees'
async doSave(){
        try {
        // 头像上传是在子组件 uploadImg中实现，上传成功之后新的头像的地址
        // 也保存在子组件中

        // 这里需要从子组件中获取 新的头像的地址， 调用接口
        const newPhotoUrl = this.$refs.staffPhoto.imageUrl
        console.log('从子组件中获取 最新上传的头像的地址', newPhotoUrl)
        this.userInfo.staffPhoto = newPhotoUrl

        const res = await saveUserDetailById(this.userInfo)
        console.log('保存个人信息之后的结果是', res)
        // 1. 提示
        this.$message.success('保存成功')
        // 2. 回到列表页
        this.$router.back()
      } catch (err) {
        this.$message.error(err.message)
      }
        }
        }