文件上传

介绍

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

API

Props

Props 属性

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

注意

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

/**
 * 上传成功时触发
 *
 */
function action(ctx, fileItem) {
  fileItem.response.data = [fileItem.response.data];
}

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