微信小程序 图片上传 图片预览

先看下效果图吧，不得不说 微信小程序的设计真的很好！用户体验也很好~

image.png image.png

拍照和上传照片 官网讲的很详细

image.png

具体用法也很简单 js 部分代码

 selectBottom() {
    const selectNum = this.data.selectImageList.length;
    const num = 3 - selectNum;
    num != 0 && wx.chooseImage({
      count: num,
      success: (res) => {
      
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        let newList = this.data.selectImageList;
        for (let i = 0; i < tempFilePaths.length; i++) {
          newList.push(tempFilePaths[i]);
        }

        newList.length == 3 ? this.setData({
          isShow: false
        }) :null;
        this.setData({
          selectImageList: newList
        }, () => {
          console.log(this.data.selectImageList)
        })
        // console.log("tempFilePaths:"+JSON.stringify(tempFilePaths))
      }
    })
  },

closeOption(e) {
    const {
      index
    } = e.currentTarget.dataset;
    let imagelist = this.data.selectImageList;
    imagelist.splice(index, 1);
    this.setData({
      selectImageList: imagelist,
      isShow:true
    })
    console.log(JSON.stringify(e))

  },

vxml 相关代码

 <view class='image-list-view'>
 <view wx:if="{{isShow}}" class='line-x' bindtap='selectBottom' hover-class='white-active'>
  <icon class='icontfont icon-img'></icon>
   <text class="icontfont sml">上传凭证</text>
 </view>
  <block wx:for="{{selectImageList}}" wx:key="{{index}}" >
    <view class='image-posit'>
    <image src="{{item}}" class='image-list'/>
      <icon class="icontfont i-smal icon-form-close" data-index="{{index}}" bindtap='closeOption'></icon>
    </view>
 </block>
 </view>

预览的话也简单 看下官方介绍

image.png

previewImage(e) {
    const { url, imagelist } = e.currentTarget.dataset;
    wx.previewImage({
      urls: imagelist,  //预览的图片url数组
      current: url,  //当前的url
    })
  },

 <image  wx:for="{{item.imageList}}" wx:for-item="i" src="{{i}}" class="anser-iamge-items"  bindtap='previewImage' data-url="{{i}}" data-imagelist="{{item.imageList}}"/>

image.png

微信小程序很好玩 ，体验性非常不错，开发难度也不大。爱上她了。