微信小程序照相与摄像功能实现——chooseImage 与 chooseVideo 详解

一、案例说明

本案例实现微信小程序的"照相和摄像"功能：点击按钮调用系统相机拍照或从相册选择图片，并把图片显示在页面上；点击按钮拍摄或选择视频，并用 video 组件播放。在此基础上扩展了一个"预览图片"按钮：没有图片时按钮不可点击，有图片时点击可以全屏预览。

二、页面结构

xml 复制代码

<scroll-view class="scrollarea" scroll-y type="list">
  <view class="box">
    <view class="title">{{title}}</view>
    <view class="btn-layout">
      <button type="primary" size="mini" bind:tap="getImage">获取图片</button>
    </view>
    <!-- 功能扩展：没有图片时按钮不可点击 -->
    <view class="btn-layout">
      <button type="primary" size="mini" bind:tap="previewImage" disabled="{{!imagePath}}">预览图片</button>
    </view>
    <image src="{{imagePath}}" mode="widthFix" />
    <view class="btn-layout">
      <button type="primary" size="mini" bind:tap="getVideo">获取视频</button>
    </view>
    <video src="{{videoPath}}" controls></video>
  </view>
</scroll-view>

页面用 scroll-view 做纵向滚动容器，image 用 mode="widthFix" 保证宽度撑满、高度自适应，video 加 controls 属性显示播放控件。

三、核心逻辑

1. 获取图片

javascript 复制代码

getImage() {
  wx.chooseImage({
    count: 1,                              // 最多选择 1 张
    sizeType: ['original', 'compressed'],  // 原图或压缩图
    sourceType: ['album', 'camera'],       // 相册或相机
    success: (res) => {
      this.setData({
        imagePath: res.tempFilePaths[0],
        title: '获取图片'
      })
    },
    fail: (err) => {
      this.setData({ title: '获取图片失败' })
    }
  })
}

wx.chooseImage 返回的 res.tempFilePaths 是临时文件路径数组，可以直接赋给 image 组件的 src。

2. 获取视频

javascript 复制代码

getVideo() {
  wx.chooseVideo({
    sourceType: ['album', 'camera'],
    maxDuration: 60,   // 最长拍摄 60 秒
    camera: 'back',    // 默认后置摄像头
    success: (res) => {
      this.setData({
        videoPath: res.tempFilePath,
        title: '获取视频'
      })
    }
  })
}

注意 chooseVideo 返回的是单个 tempFilePath，而不是数组。

3. 功能扩展：预览图片

javascript 复制代码

previewImage() {
  if (!this.data.imagePath) {
    return
  }
  wx.previewImage({
    urls: [this.data.imagePath],   // 需要预览的图片链接列表
    current: this.data.imagePath   // 当前显示的图片
  })
}

按钮的禁用状态通过 disabled="{``{!imagePath}}" 控制：imagePath 为空字符串时 !imagePath 为真，按钮变灰不可点；成功获取图片后再点击即可全屏预览（预览界面自带 1/1 计数）。

四、踩坑记录

临时路径会失效 ：tempFilePaths 只在当前小程序生命周期内有效，重启后失效，需要持久保存时应使用 wx.saveFile 或上传服务器；
开发者工具不弹相机 ：模拟器里 sourceType 选 camera 会用工具自带的模拟拍照，想测试真实相机需要真机预览；
权限问题：真机首次调用拍照/相册会弹系统授权框，拒绝后要引导用户去设置页开启；
视频组件层级 ：video 是原生组件，在 WebView 渲染下层级最高，注意不要和弹窗、遮罩混用。

五、总结

wx.chooseImage 和 wx.chooseVideo 是获取用户图片、视频最常用的两个 API，配合 image、video 组件即可完成完整的照相摄像功能。扩展的"预览图片"按钮通过 disabled 绑定数据状态来控制可用性，是一个很实用的交互细节。