微信小程序多图片上传功能

前端页面布局：

 <!-- 上传图片 -->
    <!--miniprogram/pages/fb/fb.wxml-->
    <view class=' ImgeContent'>
    <view >图片上传</view>
    <!-- 图片 -->
    <view class="images_box">
      <block>
        <view class="img-v weui-uploader__bd">
          <view class='pic' wx:for="{
   
   {imgs}}" wx:for-item="item" wx:key="*this">
              <image class='weui-uploader__img '
                      src="{
   
   {item}}"
                      data-index="{
   
   {index}}" mode="aspectFill" bindtap="previewImg">
                        <icon type='cancel' class="delete-btn" data-index="{
   
   {index}}" catchtap="deleteImg"></icon>
              </image>
          </view>
          <view hidden="{
   
   {ShowBtn}}" class='img-box' bindtap="chooseImg" >
            <image class='img' src='../../compones/assates/imgs/add.jpg'></image>  
          </view>
        </view>
      </block>
    </view>
    </view>

js代码：

// 选择图片 &&&
addPic1: function (e) {
var imgbox = this.data.imgbox;
console.log(imgbox)
var that = this;
var n = 9;
if (9 > imgbox.length > 0) {
 n = 9 - imgbox.length;
} else if (imgbox.length == 9) {
 n = 1;
}
wx.chooseImage({
 count: n, // 默认9，设置图片张数
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
 success: function (res) {
  // console.log(res.tempFilePaths)
  // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths

  if (imgbox.length == 0) {
   imgbox = tempFilePaths
  } else if (9 > imgbox.length) {
   imgbox = imgbox.concat(tempFilePaths);
  }
  that.setData({
   imgbox: imgbox
  });
 }
})
},
//图片
chooseImg: function (e) {
  var that = this;
  var imgs = this.data.imgs;
  if (imgs.length >= 6) {
    this.setData({
      lenMore: 1,
      ShowBtn:true
    });
    setTimeout(function () {
      that.setData({
        lenMore: 0
      });
    }, 2500);
    return false;
  }
  wx.chooseImage({
    // count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      var imgs = [];
      // console.log(tempFilePaths + '----');
      for (var i = 0; i < tempFilePaths.length; i++) {
        if (imgs.length >= 6) {
          that.setData({
            imgs: imgs,
            ShowBtn:true
          });
          return false;
        } else {
          imgs.push(tempFilePaths[i]);
        }
      }
     
      // console.log(imgs);
      that.setData({
        imgs: imgs,
        

      });
      //上传图片
      that.globalData.imgs = imgs
     
    }

  });
},
  // 删除图片
  // deleteImg: function (e) {
  //   var imgs = this.data.imgs;
  //   var index = e.currentTarget.dataset.index;
  //   imgs.splice(index, 1);
  //   this.setData({
  //     imgs: imgs
  //   });
  // },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },

data 中：

data: {
  imgs: [],//要上传的图片
},