个人中心 (二) 02-编辑资料-修改头像-逻辑：获取文件-准备formData-提文件-关对话框-成功提示-显头像& $toast.success('提示')& $refs.file获取上传DOM

个人中心-编辑资料-修改头像-逻辑：获取文件-准备formData-提交文件-关闭对话框-成功提示-显示头像 & this.$toast.success(‘提示语’) & $refs.file获取上传DOM

Uploader 文件上传-基础用法：https://youzan.github.io/vant/#/zh-CN/uploader#ji-chu-yong-fa

• 准备上传文件控件 src/views/user/profile.vue中div里相应位置

<input ref="file" @change="changeFile" type="file" style="display:none">

• 点击头像触发控件 src/views/user/profile.vue中div里相应位置

//获取DOM  即$refs.file
<van-cell value="本地相册选择" @click="$refs.file.click()" is-link/>

• 绑定changeFile函数 methods里

    // 上传图片
    async changeFile () {
      // 1. 获取文件 (以前this.files[0]获取文件)
      const file = this.$refs.file.files[0]
      // 2. 准备formData
      const fd = new FormData()
      fd.append('photo', file)
      // 3. 提交文件  异步提交
      const data = await updatePhoto(fd)
      // 4. 关闭对话框
      this.showPhoto = false
      // 5. 成功提示
      this.$toast.success('更新头像成功')
      // 6. 显示头像
      this.photo = data.photo
    }

• 封装API src/api/user.js

/**
 * 修改头像
 * @param {Object} formData - 文件对象
 */
export const updatePhoto = (formData) => {
  return request(`/app/v1_0/user/photo`, 'patch', formData)
}

src/views/user/profile.vue中script里导入：

import { updatePhoto } from '@/api/user'

来源：CSDN

作者：viceen

链接：https://blog.csdn.net/weixin_44867717/article/details/104813369