跳到主要内容

图片上传

图片上传控件适用于用户需要提交照片或图像内容的所有场景。

一、何时使用​

  • 需要上传单张或多张图片
  • 上传证件照、头像、商品图等
  • 场景如：商品发布、用户认证、内容投稿等

二、属性配置​

1. 数据设置​

数据绑定配置

数据绑定 -- 可以为图片上传设置初始值，可选择页面参数和值。详见数据绑定。

上传方式

  • base64：设置二进制图片数据
  • 远程服务：调用第三方或自定义接口

2. 功能设置​

功能设置图示

2.1 模板类型​

可选择：

  • 默认模板
  • 自定义模板

默认模板示例：

默认模板

自定义模板示例：

自定义模板

2.2 按钮设置​

  • 按钮文本：自定义上传按钮上的文字（默认模板生效）
  • 按钮图标：自定义上传按钮图标（默认模板生效）

按钮设置
图标设置

2.3 选图模式​

支持模式：

  • 拍照
  • 相册
  • 拍照 + 相册（H5 仅支持拍照和相册）

选图模式

2.4 上传限制​

  • 允许多选：可上传多张图（部分安卓不支持）
  • 单图大小上限：单位为 MB
  • 数量上限：限制可上传的图片数量（默认无限制）

2.5 预览与删除​

  • 图片预览：默认启用，可设置是否允许
  • 全屏预览：默认启用全屏预览
  • 显示删除按钮：默认启用，可关闭

2.6 裁剪模式​

共 5 种裁剪模式：

模式名称说明
拉伸填满拉伸填满容器，可能变形
等比缩放图片完整显示，容器可能留白
等比裁剪图片放大填满容器，多余部分裁剪
原始尺寸按原图尺寸显示
等比缩小小图保持原尺寸，大图缩放至容器内
  • 拉伸填满
    拉伸填满
  • 等比缩放
    等比缩放
  • 等比裁剪
    等比裁剪
  • 原始尺寸
    原始尺寸
  • 等比缩小
    等比缩小

2.7 显示尺寸设置​

  • 单项尺寸：设置缩略图在页面上的展示尺寸（宽高），不影响实际图片大小

缩略图尺寸

三、样式设置​

无组件专属样式配置，详见：通用样式

四、常见使用场景​

1. 发布商品或文章时上传图片​

商品图片上传