微信小程序图片上传，多图上传可限制张数

wxml

<view class="up_items">
	<view class="up_item" wx:for="{
     
     {images}}" wx:key="*this">
		<image class="up_image" src="{
     
     {item}}"></image>
	</view>
	<view class="up_btn" bindtap="upLoad" wx:if="{
     
     {images.length<10}}">
		<view class="up_add">+</view>
		<view class="up_lable">上传9张</view>
	</view>
</view>

wxss

.up_items{
  padding:30rpx 30rpx 120rpx;
  overflow: hidden;
}
.up_item,.up_btn{
  width: 210rpx;
  margin:10rpx;
  height: 160rpx;
  text-align: center;
  color: #999999;
  border: dashed 1rpx #979797;
  border-radius: 10rpx;
  float: left;
}
.up_image{
  width: 210rpx;
  height: 100%;
}
.up_add{
  font-size: 100rpx;
  line-height: 100rpx;
}
.up_lable{
  font-size: 26rpx;
  position: relative;
  top: -10rpx;
}

js

data: {
    
    
   images:[]
},
upLoad: function(e) {
    
    
    let _this = this;
    wx.chooseImage({
    
    
      count: 10 - _this.data.images.length,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
    
    
        let tempFilePaths = res.tempFilePaths;
        let images = _this.data.images;
        if ((images.length + tempFilePaths.length) > 9) {
    
    
          wx.showToast({
    
    
              title: "最多只能上传9张",
              icon: 'none'
           })
          return;
        }
        tempFilePaths.map(i => {
    
    
          _this.uploadFile(i).then(res => {
    
    
            images.push(res);
            _this.setData({
    
    
              images: images
            });
          });
        });
      }
    })
},
uploadFile(tempFilePath) {
    
    
    wx.showLoading({
    
    
      title: '上传中',
    })
    return new Promise(resolve => {
    
    
      wx.uploadFile({
    
    
        url: `${
      
      app.globalData.serviceUrl}app-api/upload/uploadOSSFile`,//上传地址
        filePath: tempFilePath,
        name: 'filePath',//上传参数
        header: {
    
    
          'content-type': 'multipart/form-data'
        },
        success: res => {
    
    
          wx.hideLoading()
          let data = JSON.parse(res.data)
          if(data.code==200){
    
    
            resolve(data.data);
          }else{
    
    
            wx.showToast({
    
    
              title: data.msg,
              icon: 'none'
            })
          }
        },
        fail:res=>{
    
    
          console.log(res)
        }
      })
    })
},