跳到主要内容

图片上传

图片上传和拖拽上传控件。

何时使用

  • 当需要上传一个或多个图片时。
  • 当需要展示上传进度时。
  • 当使用拖拽交互时。

一、属性

1. 数据

数据绑定

1.1 数据绑定

详见 数据绑定

1.2 上传方式

  • base64:本地服务,存储二进制数据到数据库。
  • 远程服务:第三方文件服务器,或用户自定义的文件上传接口。

2. 功能

功能设置

2.1 允许多选

允许图片上传组件上传多张图片。当需要上传多个图片时,需开启该配置项。最好搭配上传列表,可以看到上传文件的数量,且用户如果不小心选错图片,还可以进行删除操作。

2.2 单图大小上限

限制上传的单张图片大小。

2.3 数量上限

限制可上传图片的最大数量。例如设置为3时,上传第4个将失败(不会提示)。

2.4 按钮文本与按钮图标

设置图片上传组件的文本描述和图标。

按钮文本和图标

2.5 列表类型

列表类型有三种选择,分别为文字、图片、卡片。

列表类型

  • 当不需要显示上传的图片时,可以选择文字。

    文字列表

  • 当需要显示上传的图片,并且显示上传文件名时,使用卡片列表。

    卡片列表

  • 当需要显示上传图片但不显示文件名时,使用图片列表。

    图片列表

二、常见使用场景

  1. 选择图片进行数据录入

    添加图书时,需要选择图书封面。

图书封面上传