文件上传
#
适用场景用于上传保存本地文件
#
基础能力说明#
绑定「文件、数组」字段- 单个文件上传:表单容器绑定数据模型后,模型中的「文件」字段会自动渲染为文件上传组件,实现对单个文件上传的支持
- 多个文件上传:表单容器绑定数据模型后,模型中元素类型为图片的「数组」字段会自动渲染为文件上传组件,实现对多个文件上传的支持
#
获取用户上传文件后的文件 ID通过文件上传组件上传文件后,会触发「上传成功」事件,通过该事件的出参 event.detail.value 获取上传文件的 cloudID,可通过打印日志的方式,查看到该 ID,示例如下
创建一个自定义方法,写入打印日志代码 console.log(event.detail.value) ,具体内容格式如下图所示:
页面中拖入「文件上传」组件,配置「上传成功」事件触发该打印日志方法
预览配置效果,会发现文件上传成功后,会将上传文件的 cloudID 打印在控制台中
在日常使用中,您可以通过组件的上传成功事件,将该 ID 存入变量,或通过其他方式进行使用
#
注意事项caution
文件上传后,用户可通过该文件的 https 地址下载文件。如需限制所有文件/图片资源仅当前上传用户可下载,请在微搭环境的云开发-云存储模块中调整存储桶访问权限为「仅创建者及管理员可读写」
#
属性介绍组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
绑定字段 | name | string | 基础属性 | "formFileUpload" | 提交表单时会将组件值提交保存到所配置的字段中 |
字段标题 | label | string | 基础属性 | "上传文件" | 组件标题位置的显示内容 |
显示标题 | labelVisible | boolean | 基础属性 | true | 显示组件的标题 |
必填 | required | boolean | 基础属性 | false | 启用后该组件强制必填,值不可为空 |
必填标识 | requiredFlag | boolean | 基础属性 | true | 启用后,组件若要求必填,则会显示必填星号标记 |
必填校验提示 | requiredMsg | string | 基础属性 | "该项为必填项" | 启用必填,但组件值为空时的提示信息 |
上传文件最大数量 | maxUploadCount | number | 基础属性 | 9 | - |
单个文件最大限制(M) | maxSize | number | 高级属性 | 10 | 最大支持500M |
布局方式 | layout | {"label":"自动","value":""}|{"label":"水平","value":"horizontal"}|{"label":"垂直","value":"vertical"} | 高级属性 | "" | 设置当前组件的标题和输入选择区域为左右布局或上下布局,如选择“自动”,则跟随父级表单容器的配置 |
文件类型(WEB端) | acceptTypes | array | 高级属性 | ["*"] | 支持上传的文件类型格式 |
显示下载按钮 | downloadVisible | boolean | 高级属性 | true | 显示文件下载按钮 |
显示删除按钮 | deleteVisible | boolean | 高级属性 | true | 显示文件删除按钮 |
禁用 | disabled | boolean | 高级属性 | false | 是否禁用输入/选择,启用后组件强制显示为只读效果 |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
值改变 | change | 兼容三端 | - | |
上传成功 | success | 兼容三端 | - | |
上传失败 | error | 兼容三端 | - |