Fork me on GitHub

[小程序]-使用Weui-wxss进行图片上传

Weui-wxss作为微信官方推出的UI库性能还是很不错的,在这里使用weui-loader来进行图片多张上传

小程序版weui下载地址:https://github.com/Tencent/weui-wxss

image

app.wxss

1
2
/**app.wxss**/
@import "weui.wxss";

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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">{{images.length}}/9</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{images}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<button bindtap="uploadImg">确定上传图片</button>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Page({

/**
* 页面的初始数据
*/
data: {
images: [],//临时图片地址
},

chooseImage: function () {
var that = this;
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
console.log(res);
var tempFilePaths = res.tempFilePaths
that.setData({
images: that.data.images.concat(tempFilePaths)
})

}
})
},
previewImage: function (e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.images // 需要预览的图片http链接列表
})
}

})

文章参考来自:https://www.cnblogs.com/Anne3/p/8884270.html

支持作者