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

一、用户行为分析

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

• 单图片上传

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

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: 'photos',
    model:2,
    count:9 
});

//2、调用
uploader.choose();
...
/*
* 图片上传对象
*/
class picUploader{

  constructor(data){

    this.that = data.that;
    this.name = data.name;
    this.mode = data.mode || 1;
    this.count = this.model == 1 ?1:data.count || 9;
  }

  /*
  * 选择图片
  */
  choose(){

    const self = this;

    wx.chooseImage({
      count: (self.count - self.that.data[self.name].length),
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;

        self.append(tempFilePaths);
      }
    })
  }

  /*
  * 显示图片
  */

  show(){

    let self = this;
    let view = {};
    view[self.name] = self.that.data[self.name];

    self.that.setData(view);

  }

  /*
  * 追加图片
  */
  append(data){

    const self = this;
    for (let i = 0; i < data.length; i++) {

      self.that.data[self.name].push(data[i]);
    }

    self.show();
  }

  /*
  * 删除图片
  */ 
  del(index){

    let self = this;

    self.that.data[self.name].splice(index,1);

    self.show();
  }


}
module.exports = picUploader;

• wxml

<view class="form-photo-group">
   <block wx:if="{{photos.length > 0}}">
     <view wx:for="{{photos}}" wx:key="index" style="{{'background-image: url('+item+');border:0;'}}" class="photo-preview">
         <view class="del-btn" catchtap="bindViewEvent" data-model="images" data-method="remote" data-index="{{index}}"></view>

         </view>
  </block>
  <view wx:if="{{photos.length <9}}" class="plus photo-preview" bindtap="bindViewEvent" data-model="images" data-method="choose"></view>
</view>