小程序之上传图片

先来效果图：

分割线-------------------------------------------------------------------------------------

wxml：

<view>
      <view class='up_img_box'>
        <!-- 图片预览 -->
        <view class='preview-warp' wx:if="{{urls}}" wx:for="{{urls}}" wx:key>
          <!-- 图片缩略图  -->
          <image src='{{item}}' mode="scaleToFill" data-index="{{index}}" bindtap="previewImg" />
          <!-- 移除图片的按钮  -->
          <icon type="clear" size="20" data-index="{{index}}" bindtap="removeImg" />
        </view>

        <!-- 按钮组 -->
        <view class='upimg' bindtap='upImgs'>
          <image class='add_img' src="/images/home/upload_g.png"></image>
          <view class='addText'>上传图片</view>
        </view>
      </view>
    </view>

wxss:

/*上传图片*/

/* 预览 */

.up_img_box {
  display: flex;
  flex-wrap: wrap;
}

.preview-warp {
  display: flex;
  margin-right: 14rpx;
  position: relative;
}

.preview-warp image {
  width: 184rpx;
  height: 184rpx;
  margin-bottom: 14rpx;
}

.preview-warp icon {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  color: #fff;
  background: #fff;
  border-radius: 50%;
}

/* 上传按钮组 */

.upimg {
  width: 184rpx;
  height: 184rpx;
  border: 1px solid #eee;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0px 1rpx 16rpx 0px rgba(28, 28, 28, 0.14);
  border-radius: 10rpx;
  background: #F5F5F5;
}

.add_img {
  width: 38rpx;
  height: 35rpx;
  display: block;
}

.addText {
  font-size: 24rpx;
  color: #a8a8a8;
  width: 100%;
  text-align: center;
  margin-top: 10rpx;
}

js:

// 点击上传图片
  upImgs() {
    var _this = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      // itemColor: "#f7982a",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            _this.chooseImg('album')
          } else if (res.tapIndex == 1) {
            _this.chooseImg('camera')
          }
        }
      }
    })
  },
  /**
   * 上传图片
   */
  chooseImg: function(type) {
    var _this = this;
    wx.chooseImage({
      count: 1, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [type],  //可以指定来源是相册还是相机，默认二者都有
      success: res => {
        /*上传单张*/
        wx.uploadFile({
          url: getApp().globalData.baseUrl + "/market/uploads/uploadList",//自己请求的上传图片地址
          filePath: res.tempFilePaths[0],
          header: {
            token: wx.getStorageSync('wholesale_login_token')
          },
          name: 'source',//后台需要传的字段名
          success: res => {
            res.data = JSON.parse(res.data) //这里因为后台给我挖了个坑，返回的是字符串，所以我这里解析了一下，正常的话不需要这一步
            _this.data.urls.push(res.data.url);
            // 限制最多只能留下3张照片
            if (_this.data.urls.length <= 3) {
              _this.data.urls = _this.data.urls
            } else {
              _this.data.urls = _this.data.urls.splice(0, 3)
              wx.showToast({
                title: '最多只能上传三张图片!',
                icon: 'none',
                duration: 2000
              })
            }
            _this.setData({
              urls: _this.data.urls
            })
          }, 
          fail(err) {
            console.log(err)
          }
        })
      }
      /*上传多张（遍历数组，一次传一张）
        for (var index in res.tempFilePaths) {
          that.upload_file(url, res.tempFilePaths[index])
        }
      */
    })
  },
  /*图片预览*/
  previewImg(e) {
    // console.log(e, e.currentTarget.dataset.index);
    var index = e.currentTarget.dataset.index;
    var imgArr = this.data.urls;
    wx.previewImage({
      current: imgArr[index], //当前图片地址
      urls: imgArr, //所有要预览的图片的地址集合 数组形式
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  /*移除图片*/
  removeImg(e) {
    var index = e.currentTarget.dataset.index;
    this.data.urls.splice(index, 1)
    this.setData({
      urls: this.data.urls
    })
  },