In the course of the project to write a small program, it is inevitable there will need to upload pictures and displays at the specified location. The following are some of the problems and solutions encountered when I write a small program of micro-channel image upload and display.
Small micro-channel application development documentation in a very detailed description, but there is not a lot of people like me could not stand to see the document. I recommend using a micro-channel official launch of the WEUI component library: https://weui.io/ , WeUI is consistent with a micro-channel native visual experience base style library, designed by a team official micro-channel micro letter pages and a small amount of micro-channel program body design, so that the user's perception of a more unified. The following access codes to the topic:
A, wxml typesetting and layout
<view class="page">
<view class="page__hd">
<view class="page__title">Uploader</view>
<view class="page__desc">上传组件</view>
</view>
<view class="page__bd">
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">图片上传</view>
<view class="weui-uploader__info">{{files.length}}/2</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
</view>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
</view>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
</view>
<view class="weui-uploader__file weui-uploader__file_status">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
<view class="weui-uploader__file-content">
<icon type="warn" size="23" color="#F43530"></icon>
</view>
</view>
<view class="weui-uploader__file weui-uploader__file_status">
<image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
<view class="weui-uploader__file-content">50%</view>
</view>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>Second, the logic code
Page({
data: {
files: []
},
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function(e){
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
})
}
});Third, the results show
Fourth, summarize experiences
This function is achievable image upload and display, as well as upload the picture to enlarge preview the effect. If there is need to remove the back of the uploaded pictures, I will again one supplement.