useChooseImage
封装图片选择功能,处理不同平台的兼容性问题。
平台支持
全平台
微信小程序兼容性说明
从微信小程序基础库 2.21.0 开始,uni.chooseImage 已停止维护,推荐使用 uni.chooseMedia 代替。本 hook 自动处理了这一兼容性问题:
- 在微信小程序平台,自动使用
uni.chooseMedia接口 - 在其他平台,继续使用
uni.chooseImage接口 - 统一返回结果格式,确保不同平台返回的数据结构一致
参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| count | number | 否 | 9 | 最多可以选择的图片张数 |
| sizeType | string[] | 否 | ['original', 'compressed'] | 所选的图片的尺寸 |
| sourceType | string[] | 否 | ['album', 'camera'] | 选择图片的来源 |
| extension | string[] | 否 | [] | 文件扩展名过滤(微信小程序不支持) |
返回值
Promise<UniApp.ChooseImageSuccessCallbackResult> - 图片选择结果
使用示例
typescript
import { useChooseImage } from "uni-toolkit";
import { ref } from "vue";
// 在组件中使用
export default {
async setup() {
const chooseImage = async () => {
try {
const res = await useChooseImage({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"]
});
console.log("选择的图片:", res.tempFilePaths);
// 实际应用示例 - 显示选择的图片
const imgSrc = ref(res.tempFilePaths[0]);
} catch (error) {
console.error("选择图片失败:", error);
}
};
return { chooseImage };
}
};特性
- 自动处理微信小程序的兼容性问题,在微信小程序中使用
chooseMedia接口 - 统一不同平台的返回结果格式
- 支持文件扩展名过滤(除微信小程序外)
- 提供详细的错误信息,便于调试
注意事项
- 在微信小程序中,
extension参数将被忽略,因为chooseMedia接口不支持此参数 - 在非微信小程序平台,
extension参数正常工作