小程序多图转base64上传

小程序的多图上传我之前的文章写过。

原理是直接用 wx.chooseImage 1.选择图片，2.微信把图片变成本地图，3.你拿这个本地路径给接口，接口给你张网络图路径。

最近遇见一个需求是为了省服务器空间和带宽，需要把本地图转成base64再传给接口（下图是接口文档）。网上找了很多多图转base64,都是废话。所以自己写一个。老规矩，拿来可以直接用。

 

效果图：

代码：

<view class="weui-cell">
    <view class="weui-cell__bd">
        <view class="weui-uploader">
            <view class="weui-uploader__hd">
                <view class="weui-uploader__title">上传图片：<text>(最多上传3张)</text></view>
            </view>
            <view class="weui-uploader__bd">
                <view class="weui-uploader__files">
                    <block wx:for="{{pics}}" wx:key="pics" wx:for-item="image">
                        <view class="weui-uploader__file">
                            <image class="weui-uploader__img" src="{{image}}" src="{{image}}" bindtap="previewImage"></image>
                            <view class='closex' bindtap='deleteImg' data-index='{{index}}'>X</view>
                        </view>
                    </block>
                    <!-- 加号 -->
                    <view class="weui-uploader__input-box {{isShow?'true':'hideTrue'}}">
                    <view class="weui-uploader__input" bindtap="chooseImage"></view>
                     </view>
                    <!-- 加号 -->
                </view>
                <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
                <!-- isShow 这个是判断是否进行触发点隐藏操作 -->
                
            </view>
        </view>
    </view>
</view>

/* add img */

icon {
  vertical-align: middle;
}

.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.weui-cell_input {
  padding-top: 0;
  padding-bottom: 0;
}

.weui-uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  align-items: center;
}

.weui-uploader__title {
  flex: 1;
}

.weui-uploader__title text {
  color: #b2b2b2;
}

.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}

.weui-uploader__file {
  float: left;
  margin-right: 9rpx;
  margin-bottom: 9rpx;
  position: relative;
}

.weui-uploader__img {
  display: block;
  width: 120rpx;
  height: 120rpx;
}

.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 10rpx;
  width: 120rpx;
  height: 120rpx;
  box-sizing: border-box;
  border: 1rpx solid #d9d9d9;
}

.weui-uploader__input-box:before, .weui-uploader__input-box:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}

.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}

.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}

.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hideTrue {
  display: none;
}

.closex {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

js:DATA里需要写这4个参数，我就不给大家贴了。直接从点击上传开始写了就。我的需求是最多传3张，有6张，9张需求的，自己改。第10行，接着写4,5,6 就行。最终的  pics  就是base64数组。 大家可以conlse.log（）打印一下、

// 图片上传
  chooseImage: function () {
    var _this = this,
      pics = this.data.pics;
    wx.chooseImage({
      count: 3 - pics.length, // 最多可以选择的图片张数，默认9
      sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
      success: res => {
      for (var p = 0; p < res.tempFilePaths.length; p++) {
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[p], //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            var imgSrc = 'data:image/png;base64,' + res.data;
            pics = pics.concat(imgSrc);
            console.log('th++',pics)
            //   // 控制触发添加图片的最多时隐藏
            if (pics.length >= 3) {
              _this.setData({
                isShow: (!_this.data.isShow)
              })
            } else {
              _this.setData({
                isShow: (_this.data.isShow)
              })
            }
            _this.setData({
              pics: pics,
            })
          }
        })
        }
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },

  // 图片预览
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.pics
    })
  },

 // 删除图片
 deleteImg: function (e) {
   var _this = this;
  //  var imgs = this.data.imgs;
   var pics = this.data.pics;
    var index = e.currentTarget.dataset.index;
   pics.splice(index, 1);
    this.setData({
      pics: pics,
    });
   if (pics.length >= 3) {
     _this.setData({
       isShow:false
     })
   } else {
     _this.setData({
       isShow: true
     })
   }
  },

有什么不会的可以直接呼我。。。有啥可以为大家解答。