文件上传

介绍

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

API

Props

参数名	描述	类型	默认值
status	状态	'default' |'disabled'|'readonly'|'hide'	'default'
title	标题	string	'附件上传'
showLabel	显示标题	boolean	true
width	字段占比	'25%'|'50%'|'75%'|'100%'	'100%'
labelWidth	标签宽度	Object	-
value	默认值	string	-
name	数据字段	string	-
api	API绑定	string	-
draggable	拖拽	boolean	false
dragDesc	拖拽提示信息	string	-
btnTitle	按钮内容	string	-
btnType	按钮类型	'primary'|'default'|'outline'	'default'
directory	文件夹上传	boolean	false
multiple	多选	boolean	false
fileName	上传文件名	'files'|'file'	'files'
extraData	额外数据	Function	-
headers	头部信息	Function	-
setUrl	文件预览地址	Function	-
maxFileNum	最大上传文件个数	number	-
maxFileSize	单文件最大上传大小(MB)	number	-
withCredentials	是否允许请求cookie	boolean	false
autoUpload	自动上传	boolean	true
accept	上传文件类型	string	-
enablePreview	开启预览	boolean	false
previewEvent	预览事件	Function	-
enableDownload	开启下载	boolean	true
downloadEvent	下载事件	Function	-
baseStyle	自定义样式 ， 表格整体自定义样式	string	-
customClass	类名绑定 ， 绑定类的名称	string	-
boxStyle	盒模型 ， margin,border,padding设置	BoxStyle	-
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
valueFormat	默认值数据格式	'default'|'object'	'default'
extra	补充说明	string	-
tip	气泡提醒	string	-
validate	校验	Validate	-
loop	循环， 循环渲染设置	Loop	-

注意

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

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

Events

事件名	描述	参数
onSuccess	上传成功时触发	ctx params:{fileItem: FileItem} loop:LoopParams
onError	上传失败时触发	ctx params:{fileItem: FileItem} loop:LoopParams
onChange	上传的文件状态发生改变时触发	ctx params:{fileItem: FileItem, fileList: FileItem[]} loop:LoopParams
onExceeLimit	上传的文件超出限制后触发	ctx params:{fileItem: FileItem, fileList: FileItem[]} loop:LoopParams
onPreview	点击图片预览时触发	ctx params:{fileItem: FileItem} loop:LoopParams
onProgress	上传中的文件进度改变时触发	ctx params:{fileItem: FileItem, ev: ProgressEvent} loop:LoopParams
onBeforeUpload	上传前	ctx file: FileItem loop:LoopParams
onBeforeRemove	移除文件前触发	ctx params: FileItem loop:LoopParams

Type

type FileItem = {
  "file":File,
  "name":string,
  "percent":number,
  "response":{
    "alert":string,
    "code":string
    "data":any,
    "msg":string
    "ts":number,
  }
  "status":string,
  "uid":string,
  "url":string,
}

常见场景配置

设置默认值

上传组件的默认值数据类型与高级栏中默认值数据格式设置有关。默认值数据格式为「默认」时，默认值数据类型为 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