微信小程序上传多装图片

html

 <view class="upload">

    <view bindtap="uploadPic" style="margin-bottom: 20rpx;">上传退约凭证（限10张图）</view>

    <view class="pics">

      <view class="image_list" wx:for="{{piclist}}" wx:key="index">

        <image class="pic-item" src="{{item}}"></image>

        <text bindtap="delimg" data-index="{{index}}" data-id="{{childindex}}">删除</text>

      </view>

      <image class="pic-item" bindtap="uploadPic" wx:if="{{piclist.length<10}}" data-index="{{childindex}}" src="../../../images/upload.png"></image>

    </view>

  </view>



js

  // 上传图片

  uploadPic(e) {

    var i = e.currentTarget.dataset.index

    var data = this.data.bb_data

    let that = this

    wx.chooseImage({

      count: 10,

      sizeType: ['original', 'compressed'],

      sourceType: ['album', 'camera'],

      success(res) {

        util.showNone('正在上传中..')

        let tempFilePaths = res.tempFilePaths

        console.log(res)



        for (var i = 0; i < tempFilePaths.length; i++) {

          wx.uploadFile({

            url: config.service.host + '/upload/xcxUpImg',

            filePath: tempFilePaths[i],

            name: 'file',

            formData: {},

            success(res1) {

              console.log(res1)

              let piclist = that.data.piclist

              var i = e.currentTarget.dataset.index

              piclist.push(res1.data)

              that.setData({

                piclist,

              })

            }

          })

        }

      }

    })

  },





css



.upload{

  padding: 20rpx;

}

.save{

  width: 640rpx;

  height: 87rpx;

  text-align: center;

  line-height: 87rpx;

  color: #fff;

  font-size: 32rpx;

  background: #0A6EE9;

  margin: 32rpx auto 36rpx

}