更新记录
1.0.7(2026-03-20)
- UI:增加可选“已选图片预览区”(
showPreview/previewTitle)与“清空”按钮(showClear/clearText)。
- 状态:选择成功后同步组件内
selectedImages,清空时触发 clear 事件。
- UI:按钮可选“相机图标”样式(默认图标模式),减少文字样式在不同端的兼容问题。
- UI:按钮样式调整为“参考图”的虚线框 + 上方相机图标 + 下方文字布局(纯 CSS 实现,无需额外图片资源)。
- UI:按参考图调整相机图标为“线框相机”结构(拆分 body/lens 子元素),按钮边框改为浅灰实线卡片。
- 使用内嵌 SVG(data URI)替换相机图标渲染方式,提高不同端图标一致性。
- 替换相机 SVG 为线性风格版本:仅描边无填充,图标结构更贴近参考图。
1.0.6(2026-03-20)
- 增加
button-text(kebab-case)传参兼容,并将按钮文案渲染统一到 effectiveButtonText,提升 mp-weixin 端绑定稳定性。
平台兼容性
uni-app(4.87)
| Vue2 |
Vue2插件版本 |
Vue3 |
Vue3插件版本 |
Chrome |
Safari |
app-vue |
app-vue插件版本 |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
1.0.6 |
√ |
1.0.6 |
√ |
√ |
√ |
1.0.6 |
- |
8.0 |
12 |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
lucky-upImage
简介
lucky-upImage 是一个通用“图片选择”组件:只负责让用户选择图片,并把临时图片信息返回给业务方;不做上传、不内置鉴权、不负责接口请求。
功能能力
- 平台支持:vue3 / 安卓 / iOS / H5 / 微信小程序
- 图片来源支持:
- 相册:
album
- 相机:
camera
- 默认同时支持:
['album','camera']
组件交互与权限
- 组件内置按钮:用户点击后才进行权限检查/授权,避免“未交互即弹权限”的体验问题。
- 权限处理(示意):
- 微信小程序:
uni.getSetting + 用户确认后进入 uni.chooseImage(避免 uni.authorize 失败影响交互)
- 相机:
scope.camera
- 相册:
scope.album
- App:
uni.getAppAuthorizeSetting(如可用)+ uni.authorize
Props
| 名称 |
类型 |
默认值 |
说明 |
buttonText |
string |
选择图片 |
按钮文案 |
showText |
boolean |
false |
是否在相机图标旁显示文字 |
| (图标实现) |
— |
— |
相机图标使用内嵌 SVG(data URI)渲染 |
showPreview |
boolean |
false |
是否显示组件内“已选图片预览区”(仅 UI) |
previewTitle |
string |
已选图片 |
预览标题 |
showClear |
boolean |
true |
是否显示清空按钮 |
clearText |
string |
清空 |
清空按钮文案 |
disabled |
boolean |
false |
禁用组件 |
sourceType |
('album'|'camera')[] |
['album','camera'] |
图片来源 |
count |
number |
1 |
最大选择张数 |
sizeType |
('original'|'compressed')[] |
['original','compressed'] |
透传 uni.chooseImage |
事件
| 名称 |
参数结构 |
触发时机 |
choose |
{ images, count } |
选择成功 |
cancel |
无 |
用户取消/中断 |
error |
err |
选择失败 |
clear |
无 |
点击“清空”后 |
images 数组结构:
{ path: string, name?: string, size?: number, type?: string }
使用示例
<template>
<lucky-upImage
:count="9"
:sourceType="['album','camera']"
buttonText="上传前先选图"
@choose="onChooseImages"
/>
</template>
<script>
export default {
methods: {
onChooseImages({ images }) {
// images: [{path, name?, size?, type?}]
// 上传由业务方自己实现
}
}
}
</script>
注意事项
path 为临时文件路径,通常仅对当前会话有效;需要长期保存请在业务侧处理。