vant 个人中心头像修改

1,先实现前端点击获取文件对象效果

<van-cell title="头像" is-link center>
    <template #default>
        <van-image round class="avatar" :src="profile.photo" @click="$refs.iptFile.click()"/>
        <!-- file 选择框 -->
        <input
               type="file"
               ref="iptFile"
               v-show="false"
               accept="image/*"
               @change="onFileChange"
               />
    </template>
</van-cell>

<script>
export default {
  methods: {
    // 文件选择方法
    onFileChange (ev) {
      console.log(ev.target.files[0])
    }
  }
}
</script>

2,接口定义

// 用户- 更新头像
// 注意: formObj的值必须是一个表单对象
// '{"a": 10, "b": 20}' // 对象格式的JSON字符串
// new FormData() // 表单对象
export const updatePhotoAPI = (formObj) => {
  return request({
    url: '/v1_0/user/photo',
    method: 'PATCH',
    data: formObj
    // 如果你的请求体内容是表单对象, 浏览器会自动携带请求头Content-Type为multipart/form-data
  })
}

3,引入接口, 传入表单对象, 更新页面

import { updatePhotoAPI } from '@/api'
export default {
  methods: {
    // 文件选择方法
    async onFileChange (ev) {
    //   console.log(ev.target.files[0])
      if (ev.target.files.length === 0) return // 防止用户未选择图片
      const fd = new FormData()
      fd.append('photo', ev.target.files[0]) // photo在表单里参数名携带
      const res = await updatePhotoAPI(fd)
      console.log(res)
      this.profile.photo = res.data.data.photo // 更新最新头像
    }
  }
}