个人设置 (四)-修改头像-上传图片 方案：axios+formdata & 用 http-request 属性来覆盖默认上传 & 兄弟组件传值应用

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
    })