文件上传

介绍

基本表单组件，用于用户选择文件上传。

API

Props

Props 属性

参数	说明	类型	默认值
默认状态	组件的状态, "默认"|"禁用"|"隐藏"|"只读"	string	'default'
标题	组件的标题文案	string	'输入框'
显示标题	是否显示标题	boolean	true
字段占比	组件宽度在父容器中的占比，"25%"|"50%"|"75%"|"100%"	string	'100%'
默认值	组件的默认值类型	string[] | {name: string; url: string}[]	[]
数据字段	表单字段名	string	"UPLOAD_FILE_随机八位字符"
API绑定	上传api，左侧接口列表配置	string	-
拖拽	文件是否拖拽上传	boolean	false
拖拽提示信息	拖拽上传模式下的提示信息	string	-
按钮内容	上传按钮文案	string	点击上传
按钮类型	主要按钮 | 次要按钮 | 线框按钮	string	次要按钮
多选	文件是否可多选	boolean	false
上传文件名	上传接口传参名称	string	files
额外数据	上传接口body中的额外参数	object	{}
头部信息	上传接口header中的额外参数	object	{}
上传后处理	返回上传的url地址数组数据	Array	{}
最大上传文件个数	最大上传文件个数	number	6
单文件最大上传大小(MB)	单文件最大上传大小	number	20
是否允许请求cookie	是否允许请求cookie	boolean	false
上传文件类型	上传文件类型	string	-

注意

如果文件上传的接口不返回数组或字符串数组，而是返回一个 url 字符串，则应在上传后处理属性中对返回的数据进行如下处理：

function didUpload(response, ctx, loopData) {
  // 返回上传的url地址数组数据
  return [{
    url: response,
    status: "done"
  }];
}

Props 样式

参数	说明	类型	默认值
盒子模型属性设置	设置组件的盒子模型相关的各项样式属性值,包括margin、border、padding	-	-

Props 高级

参数	说明	类型	默认值
唯一标识	组件的唯一标识	string	-
默认值数据格式	默认 | 对象数组	string	default
补充说明	表单项底部的说明文字	string	''
气泡提醒	组件旁边图标悬浮显示的说明性文字	string	-
必填	未输入内容时校验不通过	boolean	false
自定义函数	自定义校验函数，可配置校验规则与校验提示内容	boolean	false
循环	循环渲染设置	-	-

Events

Events 属性

事件名	说明	回调参数
onSuccess	上传成功时触发	ctx, {fileItem: 文件对象}, loopDataList: LoopData[]
onError	上传失败时触发	ctx, {fileItem: 文件对象}, loopDataList: LoopData[]
onChange	上传的文件状态发生改变时触发	ctx, {fileItem: 文件对象, fileList: 文件列表}, loopDataList: LoopData[]
onExceeLimit	上传的文件超出限制后触发	ctx, {fileItem: 文件对象, fileList: 文件列表}, loopDataList: LoopData[]
onPreview	点击图片预览时触发	ctx, {fileItem: 文件对象}, loopDataList: LoopData[]
onProgress	上传中的文件进度改变时触发	ctx, {fileItem: 文件对象, ev: ProgressEvent}, loopDataList: LoopData[]
onBeforeUpload	上传前	ctx, file: 文件对象, loopDataList: LoopData[], return [true]
onBeforeRemove	移除文件前触发	ctx, fileItem: 文件对象, loopDataList: LoopData[], return [true]

Type

LoopData

参数名	描述	类型
indexName	索引变量名	string
paramName	迭代变量名	string
row	当前迭代数据元素	any
rowIndex	当前迭代数据索引	any
ref	完整循环数组数据	ComputedRefImpl<Array>

常见场景配置

设置默认值

上传组件的默认值数据类型与高级栏中默认值数据格式设置有关。默认值数据格式为「默认」时，默认值数据类型为 url 字符串数组；默认值数据格式为「对象数组」时，默认值数据类型为对象数组。 以下是不同默认值数据格式下的默认值配置方式：

1. 默认值数据格式为「默认」时，默认值配置示例如下：

["/bucket/test1.png","/bucket/test2.png"]

2. 默认值数据格式为「对象数组」时，默认值需具备两个字段：name（文件名称）和 url（文件地址）。默认值配置示例如下：

[{
  "url": "/uploadFile",
  "name": "文件1"
  }, 
  {
  "url": "/uploadFile",
  "name": "文件2"
  }
]

3. 默认值中，若字符串或对象数组的 url 以 http 开头，则上传文件的地址为该 url；否则，上传文件的地址为{当前页面网址}/minio/${url}。具体示例如下：

[{
    "url": "https://hisense.com/uploadFile1",
    "name": "文件1"
  },
  {
    "url": "/uploadFile2",
    "name": "文件2"
  }
]

此时文件1的上传地址为https://hisense.com/uploadFile1，文件2的上传地址为{当前页面网址}/minio/uploadFile2