更新记录

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 为临时文件路径,通常仅对当前会话有效;需要长期保存请在业务侧处理。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

scope.camera(相机)/ scope.album(相册)

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

不收集、存储或上传用户数据;仅在本地选择图片并通过组件事件返回给业务方。

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。