uni-app拍照和相册选择功能的开发
2026-06-15 08:55:27
在uni-app中实现拍照和相册选择功能的核心是通过uni.chooseImage方法，结合权限管理、图片处理和用户体验优化完成。以下是具体实现步骤和关键注意事项：
一、基础功能实现使用uni.chooseImage方法调用相机或相册，通过参数控制选择行为：
uni.chooseImage({ count: 1, // 最多选择图片数量（默认9） sizeType: ['original', 'compressed'], // 可选原图或压缩图（默认二者） sourceType: ['album', 'camera'], // 来源：相册或相机 success(res) { const tempFilePaths = res.tempFilePaths; // 获取临时文件路径 console.log('图片路径:', tempFilePaths); }});- 参数说明：
count：限制用户选择的图片数量。
sizeType：original为原图，compressed为压缩图。
sourceType：album为相册，camera为相机。
移动设备需动态申请相机和相册权限，避免功能失效：
- 检查权限状态：uni.getSetting({ success(res) { if (!res.authSetting['scope.camera'] || !res.authSetting['scope.writePhotosAlbum']) { // 未授权时引导用户授权 uni.authorize({ scope: 'scope.camera', // 或 'scope.writePhotosAlbum' success() { console.log('授权成功'); }, fail() { uni.showModal({ title: '提示', content: '需授权才能使用功能' }); } }); } }});
- 处理用户拒绝权限：
通过uni.showModal提示用户手动开启权限（路径：系统设置→应用权限）。
选择图片后需压缩或裁剪以优化性能：
- 压缩图片：uni.compressImage({ src: tempFilePaths[0], // 原图路径 quality: 80, // 压缩质量（0-100） success(res) { const compressedPath = res.tempFilePath; // 压缩后路径 console.log('压缩后路径:', compressedPath); }});
- 裁剪图片（需结合第三方库或原生插件实现）。
加载状态反馈：
使用uni.showLoading和uni.hideLoading：uni.showLoading({ title: '处理中...' });// 执行图片选择/压缩操作...uni.hideLoading();
或通过uni-popup组件实现自定义弹窗。
图片预览：
uni.previewImage({ current: tempFilePaths[0], // 当前预览图片 urls: tempFilePaths // 所有图片路径});
iOS系统差异：
首次调用相机时，iOS会弹出系统级权限提示，需在UI中提前说明功能用途。
相册选择可能受iOS隐私设置限制，需引导用户检查设置。
Android兼容性：
部分设备可能对sizeType: 'compressed'支持不佳，建议统一压缩或提供原图选项。
懒加载与分页：
多图场景下，通过分页加载减少内存占用。
使用<image>组件的lazy-load属性实现图片懒加载。
云端处理：
将图片上传至服务器后，由后端进行压缩和裁剪，减轻客户端负担。
- 权限拒绝：uni.chooseImage({ fail(err) { if (err.errMsg.includes('auth denied')) { uni.showModal({ title: '错误', content: '请授权相机/相册权限' }); } }});
- 网络异常：
上传图片时捕获uni.uploadFile的fail回调，提示用户重试。
本地存储缓存：
使用uni.setStorageSync临时保存图片路径，避免重复选择。
上传优化：
uni.uploadFile({ url: 'https://example.com/upload', filePath: compressedPath, name: 'file', formData: { userId: '123' }, success(res) { console.log('上传成功:', res.data); }});上传前压缩图片，减少传输时间。
通过以上步骤，可在uni-app中实现稳定、高效的拍照和相册选择功能，同时兼顾权限安全、性能优化和跨平台兼容性。
热门标签
