zoukankan      html  css  js  c++  java
  • 微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传不限制最多张数)

    WXML:

    <view class="weui">
      <view class="weui-uploader">
          <view class="weui-uploader__files">
            <block wx:for="{{imageList}}" wx:for-item="image" wx:for-index='idx'>
              <view class="weui-uploader__file">
                <image class="weui-uploader__img" src="{{image}}" data-id="{{idx}}" data-src="{{image}}" bindtap="previewImage"></image>
              </view>
            </block>
          </view>
          <view class="weui-uploader__input-box">
            <view class="weui-uploader__input" bindtap="chooseImage"></view>
          </view>
      </view>
      </view>

    WXSS:

    page {
      font-family: -apple-system-font, "Helvetica Neue", sans-serif;
    }
    icon {
      vertical-align: middle;
    }
    .weui{
       100%;
      height: auto;
      display: flex;
      flex-direction: column;
      background-color: #fff;
    }
    .weui-uploader{
       94%;
      margin-left: 3%;
      padding: 0px 0px 9px;
    }
    .weui-uploader__file {
      float: left;
      margin-right: 9px;
       margin-top: 9px;
    }
    .weui-uploader__img {
      display: block;
       79px;
      height: 79px;
    }
    .weui-uploader__file_status {
      position: relative;
    }
    .weui-uploader__input-box {
      float: left;
      position: relative;
      margin-right: 9px;
      margin-top: 9px;
       77px;
      height: 77px;
      border: 1px solid #d9d9d9;
    }
    .weui-uploader__input-box:before, .weui-uploader__input-box:after {
      content: " ";
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background-color: #d9d9d9;
    }
    .weui-uploader__input-box:before {
       2px;
      height: 39.5px;
    }
    .weui-uploader__input-box:after {
       39.5px;
      height: 2px;
    }
    .weui-uploader__input-box:active {
      border-color: #999;
    }
    .weui-uploader__input-box:active:before, .weui-uploader__input-box:active:after {
      background-color: #999;
    }
    .weui-uploader__input {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
       100%;
      height: 100%;
      opacity: 0;
    }

    JS:

    Page({
      data: {
        imageList: [],
      },
      chooseImage: function (event) {
        var that = this;
        wx.chooseImage({
          count: 5, // 一次最多可以选择2张图片一起上传
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success: function (res) {
            var imgeList=that.data.imageList.concat(res.tempFilePaths);
            that.setData({
              imageList: imgeList
            });
          }
        })
      },
      previewImage: function (e) {
        var that = this;
        var dataid = e.currentTarget.dataset.id;
        var imageList = that.data.imageList;
        wx.previewImage({
          current: imageList[dataid],
          urls: this.data.imageList
        });
      }
    })
  • 相关阅读:
    中台入门系列1
    微服务 2.0 技术栈选型手册
    mysql计划任务每天定时执行
    更高效地提高redis client多线程操作的并发吞吐设计
    azure之MSSQL服务性能测试
    .NET Socket服务编程之-高效连接接入编
    轻易实现基于linux或win运行的聊天服务端程序
    零配置Socket TCP消息通讯服务容器EC
    azure存储压测的问题(农码主观意识太强被坑了)
    业务逻辑层缓存应该设计
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7089406.html
Copyright © 2011-2022 走看看