小程序多图上传

小程序多图上传

效果图

WXML部分:upimg.png是一张+号图。x.png 是图片删除按钮。

<!--图片上传-->
<view class='imgsbox'>
<view class="weui-uploader" style='display:{{none}}'>
  <view class="img-v">
    <view class="img" wx:for="{{imgs1}}" wx:for-item="item" wx:key="*this">
      <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg1"></image>
      <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg1">
      <image class='imgx' src='../images/x.png'></image>
      </view>
    </view>
    <view class="upload-img-btn" bindtap="chooseImg1">
      <image src='../images/upimg.png'></image>
    </view>
  </view>
</view>
<view class='tishi'>*最多可上传9张图片</view>
</view>
<!--图片上传-结束-->

wxss：

.imgsbox{
    width: 690rpx;
    padding: 20rpx;
    margin: auto;
    background: #fff;
    border-radius:0 0 14rpx 14rpx;
    border-right: 1px solid #d6d7dc;
    border-left: 1px solid #d6d7dc;
    border-bottom: 1px solid #d6d7dc;
    box-sizing: border-box; 
    overflow: hidden;
}
.weui-cells{
    font-size: 30rpx!important;
}

.weui-cell::before{
    border-top:1rpx solid #eee;
}
.upload-img-btn image{
    width: 185rpx;
    height: 185rpx;
}
.upload-img-btn{
    float: left;
}
.img{
    width: 185rpx;
    height: 185rpx;
    float: left;
    margin: 15rpx;
    position: relative;
    overflow: hidden
}
.delete-btn{
    position: absolute;
    bottom: 0;left: 0;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    text-align: center;
    line-height: 40rpx;
    width: 100%;
}
.img image{
    width: 185rpx;
    height: 185rpx
}
.weui-select{
    border-right: none;
}
.weui-uploader__hd{
    float: left;
}
.weui-uploader__title{
    width: 150rpx!important;
}
.weui-label{
    width: 150rpx!important;
}
.upload-img-btn image{
    margin: 10rpx;
}

js部分：

//上传图片开始
  chooseImg1: function (e) {
    var that = this;
    var imgs1 = that.data.imgs1;
    if (imgs1.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseImage({
      // count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs1 = that.data.imgs1;
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs1.length >= 9) {
            that.setData({
              imgs1: imgs1
            });
            // return false;
          } else {
            imgs1.push(tempFilePaths[i]);
          }
        }
        that.setData({
          imgs1: imgs1
        });
        that.setData({
          picture1: []
        })
        var tempFilePaths = that.data.imgs1
        for (var s = 0; s < tempFilePaths.length; s++) {
          wx.uploadFile({
            url: app.config.apiUrl + 'Api/Common/uploadImage',
            filePath: tempFilePaths[s],
            name: 'image',
            success: function (res) {
              var data = res.data;
              console.log(data)
              var data = JSON.parse(res.data);
              console.log(data)
              var img_data = that.data.img_data;
              img_data.push(data.data);
              console.log(img_data)
              that.setData({
                img_data: img_data
              })
            }
          })
        }
      },
      fail:function(res){
      },
      complete: function (res) {
      }
    });
  },
  // 删除图片
  deleteImg1: function (e) {
    var that = this;
    var imgs1 = this.data.imgs1;
    var img_data = that.data.img_data;
    var index = e.currentTarget.dataset.index;
    imgs1.splice(index, 1);
    img_data.splice(index, 1);
    this.setData({
      imgs1: imgs1,
      img_data: img_data
    })
  },
  // 预览图片
  previewImg1: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs1 = this.data.imgs1;
    wx.previewImage({
      //当前显示图片
      current: imgs1[index],
      //所有图片
      urls: imgs1
    })
  },