1. User behavior analysis
According to the difference in quantity, image uploading can generally be divided into two types: single-image uploading and multi-image uploading. Due to the uncertainty of the number of multi-image uploads, users have more operability, and the logic processing is also complicated.
- single image upload
Users can only perform operations in a fixed sequence, over and over again.
1. Click the image selection button to retrieve the mobile phone album
2. Select a picture in the album (the picture will be displayed in the picture preview area of the mobile phone at this time)
3. If you are not satisfied with the picture, execute the delete operation
Operation process hint:
- Upload multiple images
Users can cross over to form complex loops.
1. Click the image selection button to call the phone album
2. Select a photo in the album
3. Perform the delete operation or perform step 1
4. Repeat 1 or 3
Operation process hint:
Summary: Changes in the order of user operations will form cross loops and require good design to ensure that they can be handled correctly.
2. Realization
1. Give the object an image name, picUploader, which means the image uploader
2. Determine its basic attributes, which are used to identify patterns and limit the number
3. Determine its basic behavior
//引入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>