# Upload 文件上传

# Options 全局配置参数

{
    // 上传的地址
	action: "",
	// 上传的文件类型
	accept: "",
	// 上传的文件字段名
	name: "file",
	// 尺寸
	size: "128px",
	// 显示图标
	icon: "el-icon-upload",
	// 显示文案
	text: "选择文件",
	// 上传大小限制
	limitSize: 2,
	// 是否已 uuid 重新命名
	rename: true
}

系统初始化会请求 /admin/comm/uploadMode 获取上传配置,配置权重:

模块参数 > 接口配置 > 全局配置

# Service 服务

服务名称 说明
space.info 文件信息
space.type 文件类型

# Components 组件

# cl-upload

文件上传

# 参数

参数 说明 类型 可选值 默认值
v-model / value 绑定值 string / array
size 图片大小 array / string / number 128px
icon 图标 string el-icon-upload
text 文本 string 选择文件
rename 是否以 uuid 重命名 boolean true
limit-size 最大允许上传文件大小(MB) number 2
preview-width 预览图片的宽度 string 500px
action 上传的地址 string
headers 设置上传的请求头部 object
multiple 是否支持多选文件 boolean
data 上传时附带的额外参数 object
name 上传的文件字段名 string
with-credentials 支持发送 cookie 凭证信息 boolean false
show-file-list 是否显示已上传文件列表 boolean true
drag 是否启用拖拽上传 boolean false
accept 接受上传的文件类型 string
listType 列表类型 string default / text / picture-card default
auto-upload 是否在选取文件后立即进行上传 boolean true
disabled 是否禁用 boolean false
limit 最大允许上传个数 number
on-preview 点击文件列表中已上传的文件时的钩子 function(file)
on-remove 文件列表移除文件时的钩子 function(file, urls)
on-success 文件上传成功时的钩子 function(response, file, urls)
on-error 文件上传失败时的钩子 function(err, file)
on-progress 文件上传时的钩子 function(event, file)
on-change 文件状态改变时的钩子 function(file, fileList)
before-upload 上传文件之前的钩子 function(file, { done })
before-remove 删除文件之前的钩子 function(file, urls)
on-exceed 文件超出个数限制时的钩子 function(files, fileList)

# cl-upload-space

文件空间

# 参数

参数 说明 类型 可选值 默认值
action 上传的地址,同 cl-upload.action string
limit 选择图片的长度 number 8
limitSize 最大允许上传文件大小(MB) number 10
disabled 是否禁用 boolean
rename 是否以 uuid 重命名 boolean true
headers 设置上传的请求头部 object
data 上传时附带的额外参数 object
accept 上传的文件类型 string
detail-data 是否返回详细数据 boolean
show-button 是否显示按钮 boolean true

# 示例

本地接口上传

<cl-upload></cl-upload>

指定类型上传 accept=.jpg,.png

<cl-upload accept=".jpg,.png"></cl-upload>

多图上传 picture-card

<cl-upload multiple :limit="3" listType="picture-card"></cl-upload>

文件上传 text

<cl-upload accept="*" list-type="text"></cl-upload>

自定义

<cl-upload icon="el-icon-picture" text="选择图片" :size="[120, 200]"></cl-upload>

拖拽上传

<cl-upload drag>
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</cl-upload>

文件空间

<cl-upload-space></cl-upload-space>