1.1.1 • Published 3 years ago
cl-admin-upload v1.1.1
Upload 文件上传
Options 全局配置参数
{
// 上传的地址
action: "",
// 上传的文件类型
accept: "",
// 上传的文件字段名
name: "file",
// 尺寸
size: "128px",
// 显示图标
icon: "el-icon-upload",
// 显示文案
text: "选择文件",
// 上传大小限制
limitSize: 10,
// 是否已 uuid 重新命名
rename: true
}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 | 10 | |
| 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>