微信小程序.图片上传功能

一、用户行为分析

图片上传按照数量上的差异，一般可划分分单图片上传与多图片上传两种。多图片上传由于数量上的不确定性，让用户有了更多的操作性，逻辑处理上也随之复杂了一些。

• 单图片上传

用户只能按照一个固定的顺序进行操作，周而复始。

1、点击选图按钮，以调取手机相册
2、选择相册中的一张图片（这时会把图片显示在手机的图片预览区域）
3、对图片不满意，执行删除操作

操作流程示意：

• 多图片上传

用户可以交叉进行，形成复杂的环路。

1、点击选图按钮，以调取手机相册
2、选择相册中的一张照片
3、执行删除操作或执行步骤1
4、重复1或3

操作流程示意：

总结：用户操作顺序的改变，会形成交叉环路，需要进行良好的设计以保证可以正确处理。

二、实现

1、给对象起个形象一些的名称，picUploader，意为图片上传者
2、确定其基本属性，用于识别模式以及限制数量
3、确定其基本行为

//引入picUploader类
const picUploader = require('../../upload/picUploader.js)';

// 小程序page页面需要传递that
//1、实例化对象
let that = this;
let uploader = new picUploader({
    that:that,
    name: