04-个人设置-修改头像
- 修改头像提交的图片 请求方式patch
- 而el-upload组件默认的提交方式是post
- 不能使用默认的上传方式,自定义上传。
- 上传图片的请求需要自己来发送。
- 大事件 上传图片 方案:xhr+formdata
- 黑马头条 上传图片 方案:axios+formdata
- 上传图片的请求需要自己来发送。
- 使用 http-request 属性来覆盖默认上传
- 指定是function ,当你选择了图片后触发
src/views/setting/index.vue 中的div盒子里
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="upload"
>
<img v-if="userInfo.photo" :src="userInfo.photo" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
进行上传
src/views/setting/index.vue 中的methods里
// 当你选择了图片后触发 有传参
async upload (result) {
// console.log(result.file) 就是选中的图片
// 通过axios和formdata提交图片
const formData = new FormData() //初始化数据
// 往formData追加图片
formData.append('photo', result.file)
const { data: { data } } = await this.$http.patch('user/photo', formData)
// 上传成功
this.$message.success('修改头像成功')
// 预览
this.userInfo.photo = data.photo
// 更新本地存储的头像
const user = store.getUser()
user.photo = data.photo
store.setUser(user)
// 更新Home组件的头像
//第三步:script下引入eventbus包 之后,谁传数据,谁用eventbus触发事件
eventBus.$emit('updatePhoto', data.photo)
},
home组件绑定事件:views/home.vue
eventBus.$on('updatePhoto', (photo) => {
// 绑定事件 接受头像数据 第二步:谁要数据,谁用eventbus绑定事件
this.photo = photo
})