在前端需求中，图片上传是非常常见的需求，在完成这个需求时，最重要的就是理解它的逻辑思路，以及一些小细节......
首先，要实现的需求为：
- 用户点击选择图片
- 出现弹框
- 用户选择图片
- 图片呈现预览状态
- 用户点击确定按钮
- 图片上传成功
以上流程是普通用户眼中的一个上传流程，但是作为一个前端人员，要考虑的就要更加细节一些......
前端实现流程：
- 如果用户已经上传过图片，那么进来应该能预览之前的图片，要做数据回填
- 点击选择图片
- 出现弹框
- 选择图片
- 确认之后
- 文件上传到云端（腾讯云、阿里云...）
- 云端传回图片地址
- 显示预览图片
- 点击上传
- 将图片保存到服务器
上面流程就是代码实现流程，按照这个思路再去一步一步做，其中，为了减轻服务器压力，以及安全性
建议将图片储存到云端，可以注册一个腾讯云或其他云服务，运用他们提供的组件将图片上传。
上图是我自己画的一个大概流程图，其中具体步骤如下：
- 根据接口要求从服务器获取图片保存到父组件中
- 父组件通过v-model语法糖将图片传给子组件，子组件通过props：value接收
- 子组件在将图片上传到云端服务，云端会返回一个图片地址给子组件
- 子组件通过$emit将图片地址传给父组件，此时，图片呈现预览模式
- 用户点击确定，父组件将图片地址保存到服务器
完成以上步骤，图片上传功能基本完成
建议将图片修改子组件设置为全局组件，方便后续重复使用
在制作图片修改子组件时
注意云端不同其相应的要求也不能，具体问题具体分析。
