员工详情里面的上传图片功能
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)
}
}
}