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

最新推荐文章于 2024-11-11 14:23:20 发布

原创最新推荐文章于 2024-11-11 14:23:20 发布 · 752 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

项目-vue-移动端专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了如何使用Vue框架实现用户头像的更新功能，包括从本地相册选择图片，利用FormData上传图片到服务器，以及成功上传后的头像显示和提示信息。通过具体代码示例，展示了从组件设计到API调用的完整流程。

个人中心-编辑资料-修改头像-逻辑：获取文件-准备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'