個人設定（4）は - 修正アバター - アップロード画像は計画：axios + FORMDATA＆値によってデフォルトのアップロード＆ブラザーズアプリケーションコンポーネントを上書きするために、HTTP要求属性を使用

04-個人設定 - 修正アバター

• パッチの方法により提出したアバター画像のリクエストを変更
• デフォルトはコンポーネントアプローチがポストであるエル・アップロードを提出します
• カスタムのアップロード、デフォルトのアップロード方法を使用することはできません。
  • 自身のリクエストアップロード画像が送信される必要があります。
    • アップロードは大きなイベントプログラムを画像：XHR + FORMDATA
    • ダークホースの見出しアップロード写真プログラム：axios + FORMDATA
• デフォルトのアップロードを無効にするために、HTTP要求属性を使用します
  • あなたは絵トリガを選択すると、機能を指定されています

SRC /ビュー/設定/ 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 /ビュー/設定/ index.vue

 // 当你选择了图片后触发  有传参
    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.vue

eventBus.$on('updatePhoto', (photo) => {
    // 绑定事件 接受头像数据   第二步：谁要数据，谁用eventbus绑定事件
      this.photo = photo
    })