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

我的页面

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 来管理数据就 可以了