UniApp 里选图、拍照、录视频、扫码这些常用功能

优先用官方内置 API（跨端兼容最好），不够再用原生插件。下面按场景给你可直接复制的完整代码 + 配置要点。

一、整体思路：内置 API 优先，插件为辅

• ✅ 选图片 / 拍照 / 录视频：用 uni.chooseMedia（官方，推荐）
• ✅ 扫一扫：用 uni.scanCode（官方，跨端）
• ✅ 特殊需求（如自定义相机、二维码生成）：用 uni-app 插件市场 原生插件（如 DCamera、QRCode）

二、选择图片 / 拍摄照片 / 录制视频（核心：uni.chooseMedia）

1. 核心 API（HBuilderX 2.2.5+，全平台兼容）

javascript

运行

// 选图/拍照/录视频 统一入口
uni.chooseMedia({
  count: 1, // 最多选1个
  mediaType: ['image', 'video'], // 可选项：image/video
  sourceType: ['album', 'camera'], // 来源：相册/相机
  maxDuration: 30, // 视频最长30秒
  camera: 'back', // 后置摄像头
  success: (res) => {
    // res.tempFiles 是返回的文件数组
    const file = res.tempFiles[0];
    console.log('文件路径：', file.tempFilePath);
    console.log('文件类型：', file.fileType); // image/video
    // 预览/上传
    uni.previewImage({ urls: [file.tempFilePath] });
  },
  fail: (err) => {
    uni.showToast({ title: '操作失败', icon: 'none' });
  }
});

2. 单独拍照（仅相机）

javascript

运行

uni.chooseMedia({
  mediaType: ['image'],
  sourceType: ['camera'],
  success: (res) => { ... }
});

3. 单独录视频（仅相机）

javascript

运行

uni.chooseMedia({
  mediaType: ['video'],
  sourceType: ['camera'],
  maxDuration: 15,
  success: (res) => { ... }
});

4. manifest 权限配置（iOS 必配，Android 按需）

json

// app-plus → ios → privacyDescription
"privacyDescription": {
  "NSPhotoLibraryUsageDescription": "访问相册上传照片",
  "NSCameraUsageDescription": "访问摄像头拍照/录视频",
  "NSMicrophoneUsageDescription": "访问麦克风录视频"
}

三、扫一扫二维码（核心：uni.scanCode）

1. 基础扫码（全平台）

javascript

运行

uni.scanCode({
  onlyFromCamera: true, // 仅相机扫码（false可相册选图）
  scanType: ['qrCode', 'barCode'], // 扫码类型：二维码/条码
  success: (res) => {
    uni.showToast({ title: '结果：' + res.result });
    console.log('扫码内容：', res.result);
  },
  fail: (err) => {
    uni.showToast({ title: '扫码失败', icon: 'none' });
  }
});

2. 相册选图扫码

javascript

运行

uni.scanCode({
  onlyFromCamera: false,
  success: (res) => { ... }
});

3. 权限配置（同拍照，需相机权限）

四、插件市场原生插件（官方 API 不够时用）

1. 常用插件推荐

• DCamera
  ：自定义相机（支持连拍、滤镜、水印）
• QRCode
  ：生成二维码 / 条形码
• uni-media
  ：高级视频录制（支持分辨率、码率调节）
• uni-choose-image
  ：兼容低版本（替代旧版 uni.chooseImage）

2. 插件安装步骤（HBuilderX）

1. 菜单栏 → 插件市场 → 搜索插件名（如 DCamera）
2. 点击 使用 → 选择项目 → 自动导入到 nativeplugins
3. manifest.json
    → App 模块配置 → 勾选对应插件
4. 重新云端打包
   （本地运行不生效）

3. 插件使用示例（DCamera 拍照）

javascript

运行

// 引入插件
const DCamera = uni.requireNativePlugin('DCamera');
// 调用拍照
DCamera.takePhoto({
  quality: 90,
  saveToAlbum: true
}, (res) => {
  console.log('照片路径：', res.path);
});

五、常见问题与避坑

1. iOS 闪退
   ：必配 privacyDescription，否则审核 / 闪退
2. Android 权限
   ：manifest.json → app-plus → android → permissions 勾选相机 / 存储
3. H5 限制
   ：H5 端只能用 uni.chooseMedia，不支持原生插件
4. 路径处理
   ：tempFilePath 是临时路径，上传前需转成本地路径（plus.io.convertLocalFileSystemURL）

六、完整页面示例（直接复制可用）

vue

<template>
  <view class="container">
    <button @click="chooseMedia">选择图片/拍照/录视频</button>
    <button @click="scanCode">扫一扫</button>
    <image v-if="imgUrl" :src="imgUrl" style="width: 200px; height: 200px; margin-top: 20rpx;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return { imgUrl: '' };
  },
  methods: {
    chooseMedia() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image', 'video'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.imgUrl = res.tempFiles[0].tempFilePath;
        }
      });
    },
    scanCode() {
      uni.scanCode({
        success: (res) => {
          uni.showToast({ title: res.result });
        }
      });
    }
  }
};
</script>