10-vue移动端项目(我的my页面与个人信息info页面: vant预览图片组件, formdata管理头像文件上传,fileReander将图片文件转换为路径)

本文链接：https://blog.csdn.net/Tangoneone/article/details/106877737

我的页面

在这里插入图片描述

01 - 静态页面

结构 & 样式
- 作者信息区域：
- 收藏区域
- 消息区域

<template>
  <div class="my">
    <!-- 个人信息区域 -->
    <div class="top">
      <div class="msg">
        <img @click="$router.push('/info')" :src="userInfo.photo" alt/>
        <span>{{userInfo.name}}</span>
        <div class="read">今日阅读</div>
      </div>
      <div class="other">
        <div class="item">
          <div class="count">{{userInfo.art_count}}</div>
          <div class="txt">动态</div>
        </div>
        <div class="item">
          <div class="count">{{userInfo.follow_count}}</div>
          <div class="txt">关注</div>
        </div>
        <div class="item">
          <div class="count">{{userInfo.fans_count}}</div>
          <div class="txt">粉丝</div>
        </div>
      </div>
    </div>
    <!-- 收藏区域 -->
    <van-grid :column-num="3">
      <van-grid-item icon="star-o" text="收藏" />
      <van-grid-item icon="clock-o" text="历史" />
      <van-grid-item icon="orders-o" text="作品" />
    </van-grid>
    <!-- 信息区域 -->
    <van-cell-group>
      <van-cell title="消息通知" is-link />
      <van-cell title="用户反馈" is-link />
      <van-cell title="小智同学" is-link />
    </van-cell-group>
  </div>
</template>

02 - 数据的渲染

步骤
- 1.0 在打开页面时得到用户的相关信息
  - 请求服务器接口（获取用户自己信息）
- 2.0 并且渲染到页面上

个人信息

在这里插入图片描述

01 - 创建组件

创建组件 & 创建路由
设置入口
- 在我的页面的用户头像位置

02 - 完成结构 & 样式

组成：

头部标题
信息一区域
信息二区域


<template>
  <div class="info">
    <van-nav-bar title="个人信息" right-text="保存" left-arrow @click-left="$router.back()"  @click-right="save" />
     <van-cell @click="openAvatar"  title="头像" is-link>
        <template #default>
           <img :src="userData.photo" alt="">
        </template>
     </van-cell>
     <van-cell @click="nameshow=true" title="昵称" :value="userData.name" is-link/>
     <van-cell  title="介绍" :value="userData.intro"  is-link/>
     <van-cell  title="性别" :value="userData.dender===0? '男':'女'" is-link/>
     <van-cell  title="生日" :value="userData.birthday"  is-link/>
     <!-- 修改用户昵称弹出层 -->
     <van-popup v-model="nameshow" position="bottom" :style="{ height: '8%' }" >
        <van-field required v-model="userData.name"  placeholder="请输入" />
    </van-popup>
    <!-- 导入修改头像子组件 -->
    <filePopup ref="avatarRef" />
  </div>
</template>

03 - 渲染用户信息

步骤：

1.0 在打开页面时，得到用户的信息
- 请求服务器接口：获取用户自己信息
  - 头像 & 昵称 & 介绍
- 请求服务器接口：获取用户个人资料
  - 性别 & 生日
2.0 保存用户的信息
3.0 将用户信息渲染到页面上

注意点：
如果直接将用户信息渲染到页面上是不行的
- 因为数据的响应式是有前提条件的

04 - 修改用户信息

步骤：

1.0 点击需要修改的选项
2.0 弹出一个修改面板在面板中显示内容
3.0 修改内容，点击保存，修改信息
- 请求服务器接口：

注意点：

完成其它属性修改时可以使用的组件：
- name: field 输入框组件传送门
- intro: field 输入框组件传送门
- gender：选择器传送门
- birthday：时间选择器传送门

05 - 头像的上传

在这里插入图片描述
步骤：

1.0 点击头像选项打开一个头像操作面板
- 封装一个头像操作面板
2.0 点击从相册中选择：弹出图片选择器
- 打开图片选择器使用一个： <input type="file"> 开启
- 这个上传框必须隐藏
- 将来点击从相册中选择，应该触发上传框的点击事件

在这里插入图片描述

3.0 选中图片，弹出一个图片预览框

得到选择的图片：
- 在上传框中有一个事件： onchange 事件可以得到图片的变化
使用 vant 中的组件：ImagePreview

为了能够让图片正常显示在组件中：应该将图片对象转为一个图片地址

方法一： URL.createObjectURL
- 这种方式兼容性会差一点

方法二： fileReander MDN使用说明: link.

// 得到要转换的图片对象
var file = document.querySelector('input[type=file]').files[0]
// 创建一个 fileReader 对象
var reader = new FileReader()
// 调用方法进行转换
reader.readAsDataURL(file)
// 接收转换的结果：转换之后执行的事件
reader.addEventListener('load', function() {
    // 可以通过 render.result 得到转换之后的 URL
})

4.0 点击关闭图片，弹出一个提示框：访问用户是否将图片设置为头像

给预览框设置一个关闭事件：

ImagePreview({
  images: [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
  ],
  onClose() {
    // do something
  },
});

5.0 点击确定，将头像进行修改
- 将图片提交到服务器
  - 请求服务器接口（编辑用户照片资料（头像、身份证照片））
  - bug：
    - 表现：提交到服务器的图片为空
    - 原因：
      - 由于异步请求时，请求的参数中有文件，文件是无法提交到服务器中的
    - 解决方案：
      - 可以使用 formData 来管理数据就可以了