小程序轮子- 多图片上传

越来越懒了，很久没有更博客了。刚好项目开发遇到一个可能比较常用的小组件，开发完成后放这里做个记录。方便以后用。

wxml

<view class='main'>
<text class='font-15'>标题</text>
<form class='form' bindsubmit='upload'>
  <view class='area-wrap'>
    <textarea name='content' focus='{{focus}}'>
    </textarea>
  </view>

  <view class='img-wrap'>

    <view wx:for="{{imgList}}" class='cell'>
      <image src='{{item}}'></image>
    </view>

    <view class='chooseImg-btn cell' bindtap='chooseImg' wx:if='{{!hideImg}}'>
    </view>
  </view>

  <view class='btn-wrap' bindtap='submitForm'>
  <button form-type='submit'>提交问题</button>
  </view>
</form>
</view>

wxss

page{
  background: rgb(250, 250, 250);
}
.main{
  padding: 20px;
}
.area-wrap{
  padding: 10px;
  border: 1px solid #efefef;
  border-radius: 6px;
  background: white;
}
.area-wrap textarea{
  font-size: 30rpx;
  width: 100%;
}
.img-wrap{
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap:wrap;
}
.chooseImg-btn{
  background: black; 
}

.cell{
  width: 30%;height: 0;padding-bottom: 30%;position: relative;
  margin-right: 20rpx;
  margin-top: 20rpx;
}

.cell image{
  width: 100%;height: 100%;position: absolute;
}
.btn-wrap{
  margin-top: 20px;
}
.btn-wrap button{
  border: 1px solid #efefef;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  color: white;
  background: rgb(150,183,246);
  border-radius: 6px;
}

js 主要是两个方法

  /**
   * 选择图片
   */
  chooseImg: function(){
    var that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        var imgList = that.data.imgList.concat(tempFilePaths);
        that.setData({
          imgList:imgList
        })

        if(imgList.length >=9 ){
          that.setData({
            hideImg:true
          });
        }
      }
    })
  },
  /**
   * 表单提交
   */
  upload: function(e){
    var that = this;
    console.log(e.detail.value);
    console.log(this.data.imgList);

    if(e.detail.value.content == ''){
      wx.showToast({
        title: '内容不能为空'
      })
      return;
    }
    wx.showLoading({
      title: '提交中'
    })

    wx.request({
      url: '', 
      data: {
        content: e.detail.value.content,
        userId: wx.getStorageSync('userid'),
        token: wx.getStorageSync('r3_session')
      },
      method:'POST',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        if(res.data.code == 200){
          let seekId = res.data.data.seekId;

          //上传图片
          if (that.data.imgList == '') {
            wx.hideLoading();
            wx.showToast({
              title: '提交成功'
            })
          } else {
            let imgList = that.data.imgList;
            let count = 0;
            for(var pic in imgList){
                const uploadTask = wx.uploadFile({
                  url: '', //仅为示例，非真实的接口地址
                  filePath: imgList[pic],
                  name: 'file',
                  formData: {
                    seekId: seekId,
                    userId: wx.getStorageSync('userid'),
                    token:  wx.getStorageSync('r3_session')
                  },
                  success: function (res) {
                    var data = res.data
                    //do something
                    count++;
                    if(count >= imgList.length){
                      wx.hideLoading();
                      wx.showToast({
                        title: '提交成功',
                      })
                    }
                  }
                });
            }
            return;

          }
        }
      },
      fail:function(e){
          console.log(e);
      }
    })
  }

其中有一个css的野路子技巧，就是能让元素的高度动态去与宽度相等，从而得到一个响应式的正方形。。

##元素

.cell{
width: 30%;height: 0;padding-bottom: 30%;position: relative;
margin-right: 20rpx;
margin-top: 20rpx;
}
“`

利用了pdding-bottom的百分比写法。