微信小程序（上传照片功能、统计字数功能）

微信小程序仿淘宝申请界面中的“申请描述”
效果图：（上传照片功能、统计字数功能）

.wxml :

<view class="apply-describe">
    <view class="apply-des">
      <text class="describe-title">申请描述</text>
      <text class="describe-text">还可以输入{{200-currentWordNumber|0}}字</text>
    </view>
    <view class='ui_uploader_cell'>
      <view class="cu-bar">
		    <textarea maxlength="-1" maxlength="200" disabled="{{modalName!=null}}" bindinput="textareaAInput" placeholder="请您详细描述具体原因"></textarea>
      </view>
      <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="index">
        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
        <image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
      </view>
        <view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}">
          <image class="ui_uploder_photo" src="../../imgs/photo.png"></image>
          <text class="ui_uploder_text">上传图片最多3张</text>
        </view>
	  </view>
  </view>

.wxss :

.apply-describe{
    width: 94%;
    height: 500rpx;
    margin-left: 20rpx;
    margin-top: 50rpx;
    background-color: rgb(234, 247, 199);
    border-radius: 10px 10px 10px 10px;
  }
  .apply-describe .apply-des{
    height: 90rpx;
    margin-top: 20rpx;
    line-height:90rpx ;
  }
  .apply-describe .apply-des .describe-title{
    font-size: 34rpx;
    margin-left: 29rpx;
    font-weight: bold;
  }
  .apply-describe .apply-des .describe-text{
    font-size: 25rpx;
    color: gray;
    margin-left: 330rpx;
  }
  
  .apply-describe .ui_uploader_cell {
    width: 93%;
    height: 370rpx;
    padding: 40rpx;
    margin-left: 24rpx;
    box-sizing: border-box;
    background-color: rgb(217, 238, 159);
    border-radius: 10px 10px 10px 10px;
  }

  .apply-describe .ui_uploader_cell .cu-bar textarea{
    height: 160rpx;
    width: 100%;
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }
  
  .apply-describe .ui_uploader_cell .ui_uploader_item{
    float: left;
    position: relative;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    width: 120rpx;
    height: 120rpx;
  }
  .apply-describe .ui_uploader_cell .ui_uploader_item .ui_uploader_item_icon{
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    background: #fff;
    border-radius: 50%;
  }
  .apply-describe .ui_uploader_cell .ui_uploader_item image {
    width: 90%;
    height: 90%;
  }

  .apply-describe .ui_uploader_cell .ui_uploader {
    /* float: left; */
    /* position: relative; */
    margin-right: 25rpx;
    margin-bottom: 25rpx;
    width: 120rpx;
    height: 120rpx;
    border: 2rpx dotted gray;
    border-radius: 10rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .apply-describe .ui_uploader_cell .ui_uploader .ui_uploder_photo{
    width: 55rpx;
    height: 55rpx;
    margin-left: 30rpx;
  }
  .apply-describe .ui_uploader_cell .ui_uploader .ui_uploder_text{
    font-size: 20rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    color: gray;
  }

.js :

Page({
    /**
     * 页面的初始数据
     */
    data: {
        uploaderList: [],
        uploaderNum:0,
        showUpload:true
    },
    onLoad: function (options) { 
    },
    // 删除图片
  clearImg:function(e){
    console.log(e);
    var nowList = [];//新数据
    var uploaderList = this.data.uploaderList;//原数据
    for (let i = 0; i < uploaderList.length;i++){
        if (i == e.currentTarget.dataset.index){
            continue;
        }else{
            nowList.push(uploaderList[i])
        }
    }
    this.setData({
        uploaderNum: this.data.uploaderNum - 1,
        uploaderList: nowList,
        showUpload: true
    })
},
//展示图片
showImg:function(e){
    var that=this;
    wx.previewImage({
        urls: that.data.uploaderList,
        current: that.data.uploaderList[e.currentTarget.dataset.index]
    })
},
//上传图片
upload: function(e) {
    var that = this;
    wx.chooseImage({
        count:3 - that.data.uploaderNum, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
            console.log(res)
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            let tempFilePaths = res.tempFilePaths;
            let uploaderList = that.data.uploaderList.concat(tempFilePaths);
            if (uploaderList.length==3){
                that.setData({
                    showUpload:false
                })
            }
            that.setData({
                uploaderList: uploaderList,
                uploaderNum: uploaderList.length,
            })
        }
    })
},
textareaAInput(e) {
  let value=e.detail.value;
  let len=parseInt(value.length);
  if(len>200) return;
  this.setData({
    currentWordNumber: len //当前字数 
  });
  this.setData({
    textareaAValue: e.detail.value
  })
}  
  })