小程序本地相册选择图片或相机拍照底部弹框功能

逃离我推掉我的手 2021-07-26 14:30 548阅读 0赞

小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html

官网里面的代码,使用chooseImage即可，count表示最多可以选择的图片张数， sizeType表示所选的图片的尺寸sourceType表示选择图片的来源，详情可以仔细阅读一下文档。

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
      }
    })

有很多功能设计的时候是这样的，点击按钮之后会从手机的底部弹出来一个询问按钮，询问是从手机里选择一张照片，还是调用摄像功能拍摄照片，这个时候其实只要多调用一下这个函数`showActionSheet`就可以了。

效果如下：点击按钮，选择图片进行替换，或者拍到一张照片，进行更换。

代码：

wxml:

<view class="container">
      <view>
        <button class="btn" bindtap="chooseimage">点击更换图片</button>
      </view>
     
      <view>
        <image src="{
       {img}}" catchTap="chooseImageTap" mode="aspectFit" class="img" />
      </view>
    </view>

wxss:

.btn {
      margin: 140rpx;
    }
     
    .img {
      width: 100%;
      height: 480rpx;
    }

Page({
      data: {
        img: '../../images/1.jpg'
      },
      onLoad: function() {},
     
      chooseWxImage: function(type) {
        var that = this;
        wx.chooseImage({
          sizeType: ['original', 'compressed'],
          sourceType: [type],
          success: function(res) {
            console.log(res);
            that.setData({
         // tempFilePath可以作为img标签的src属性显示图片
              img: res.tempFilePaths[0],
            })
          }
        })
      },
     
      chooseimage: function() {
        var that = this;
        wx.showActionSheet({
          itemList: ['从相册中选择', '拍照'],
          itemColor: "#a3a2a2",
          success: function(res) {
            if (!res.cancel) {
              if (res.tapIndex == 0) {
                that.chooseWxImage('album')
              } else if (res.tapIndex == 1) {
                that.chooseWxImage('camera')
              }
            }
          }
        })
     
      },
    })