Fork me on GitHub

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

Posted on

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

支持作者