前言
通过前两篇的学习，我们实现了用户名片的设置和读取功能，其中包括图片的上传、压缩及存储在 Nginx 服务器上。本篇我们将在前端实现用户名片的设置和读取，并在不同的场景中分别获取头像的缩略图和原图。
知识准备
本篇内容主要是页面的布局，主要涉及到了 Vue 的生命周期以及 Element UI 中的组件，在学习前，先给大家做下简单介绍。
- Vue 生命周：Vue 对象从创建到销毁的全过程，其中的每个过程都有对应的钩子函数，我们可以通过这些钩子函数指定其在某个过程中要执行的动作。
- Container 布局容器：用于布局的容器组件，方便快速搭建页面的基本结构。
- Upload 上传：通过点击或者拖拽上传文件。
- Dropdown 下拉菜单：将动作或菜单折叠到下拉菜单中。
Vue 生命周期
Vue 对象从创建到销毁经历了以下过程，每个过程都有相应的钩子函数可供调用：
- beforeCreate：创建 Vue 对象前，初始化事件，生命周期的开始。
- created：Vue 对象创建完成，对语法格式和函数进行校验，创建 Vue 对象。
- beforeMount：Vue 对象挂载前，对模板
<template>进行编译。 - mounted：Vue 对象挂载完成，模板、数据、方法均准备完毕，Vue 对象完全挂载到页面上。
- boforeDestory：销毁前，解除绑定，销毁子组件以及事件监听器。
- destoryed：销毁完毕