微信小程序开发上传媒体图片


wx.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。

在小程序中添加头像或者拍摄照片:

参数 类型 必填 说明
count Number 最多可以选择的图片张数,默认9
sizeType StringArray original 原图,compressed 压缩图,默认二者都有
sourceType StringArray album 从相册选图,camera 使用相机,默认二者都有
success Function 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

    WXML代码如下:

        <view class="weui-cells">
          <view class="weui-cell">
            <view class="weui-cell__bd">
              <view class="weui-uploader">
                <view class="weui-uploader__hd">
                  <view class="weui-uploader__title">点击可预览选好的图片</view>
                  <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view>
                </view>
                <view class="weui-uploader__bd">
                  <view class="weui-uploader__files">
                    <block wx:for="{{imageList}}" wx:for-item="image">
                      <view class="weui-uploader__file">
                        <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
                      </view>
                    </block>
                  </view>
                  <view class="weui-uploader__input-box">
                    <view class="weui-uploader__input" bindtap="chooseImage"></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

    JS代码如下:

  chooseImage: function () {
    var that = this
    wx.chooseImage({
      sourceType: sourceType[this.data.sourceTypeIndex],
      sizeType: sizeType[this.data.sizeTypeIndex],
      count: this.data.count[this.data.countIndex],
      success: function (res) {
        console.log(res)
        that.setData({
          imageList: res.tempFilePaths
        })
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src

    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  }

猜你喜欢

转载自blog.csdn.net/csjn_y/article/details/80387598