- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

# Upload 上传

通过点击或者拖拽上传文件

## 点击上传

- food.jpg

只能上传jpg/png文件，且不超过500kb

1. Element Ui Upload
2. accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） string — —
3. listType 文件列表的类型 string text/picture/picture-card text
4. autoUpload 是否在选取文件后立即进行上传 boolean — true
5. fileList 上传的文件列表, 例如: array — []

    let fileList1 =  [{name: 'food.jpg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

    <BeUpload
    	action="https://jsonplaceholder.typicode.com/posts/"
    	multiple
    	limit={9}
    	fileList={fileList1}>
    	<BeButton size="small" type="primary">点击上传</BeButton>
    	<p slot="tip">只能上传jpg/png文件，且不超过500kb</p>
    </BeUpload>

显示代码

# 照片墙

使用 list-type 属性来设置文件列表的样式。

只能上传jpg/png文件，且不超过500kb

1. hideUpload 在超出限制个数后 隐藏上传按钮
2. Element Ui Upload

    const submitHandle = () => {
    	console.log(fileList2);
    }

    <BeUpload
    	style="width: 480px;"
    	action="https://jsonplaceholder.typicode.com/posts/"
    	multiple
    	listType="picture-card"
    	limit={9}
    	hideUpload={true}
    	fileList={fileList2}>
    	<div class="upload-card"><BeIcon name="add" width="40" height="40" /></div>
    </BeUpload>

显示代码

# 拖拽上传

将文件拖到此处，或点击上传

application/pdf,application/doc,application/docx 只能上传jpg/png文件，且不超过2MB

1. drag 是否启用拖拽上传 boolean — false

    const beforeUpload = (file) => {
    	const isLt2M = file.size / 1024 / 1024 < 2;
    	if (!isLt2M) {
    		console.log('上传头像图片大小不能超过 2MB!');
    	}
    	console.log('isLt2M', isLt2M);
    	return isLt2M;
    }

    <BeUpload
    	style="width: 480px;"
    	action="https://jsonplaceholder.typicode.com/posts/"
    	drag
    	multiple
    	limit={3}
    	accept='.pdf,.doc,.docx'
    	fileList={fileList3}
    	beforeUpload={beforeUpload}
    >
    	<div class="upload-card__drag">
    		<div class="upload-card__icon">
    			<BeIcon name="upload" width="40" height="40" />
    		</div>
    		<div class="be-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    	</div>
    	<p slot="tip">application/pdf,application/doc,application/docx 只能上传jpg/png文件，且不超过2MB</p>
    </BeUpload>

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
action | 必选参数，上传的地址 | string | — | —
headers | 设置上传的请求头部 | object | — | —
multiple | 是否支持多选文件 | boolean | — | true
data | 上传时附带的额外参数 | object | — | —
name | 上传的文件字段名 | string | — | file
withCredentials | 支持发送 cookie 凭证信息 | boolean | — | false
showFileList | 是否显示已上传文件列表 | boolean | — | true
drag | 是否启用拖拽上传 | boolean | — | false
accept | 接受上传的文件类型（thumbnail-mode 模式下此参数无效） | string | — | —
onPreview | 点击文件列表中已上传的文件时的钩子 | function(file) | — | —
onRemove | 文件列表移除文件时的钩子 | function(file, fileList) | — | —
onSuccess | 文件上传成功时的钩子 | function(response, file, fileList) | — | —
onError | 文件上传失败时的钩子 | function(err, file, fileList) | — | —
onProgress | 文件上传时的钩子 | function(event, file, fileList) | — | —
onChange | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | —
beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | —
beforeRemove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 | function(file, fileList) | — | —
listType | 文件列表的类型 | string | text/picture/picture-card | text
autoUpload | 是否在选取文件后立即进行上传 | boolean | — | true
fileList | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
httpRequest | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | —
disabled | 是否禁用 | boolean | — | false
limit | 最大允许上传个数 | number | — | —
onExceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | -

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
clearFiles | 清空已上传的文件列表（该方法不支持在 beforeUpload 中调用） | —
abort | 取消上传请求 | （ file: fileList 中的 file 对象 ）
submit | 手动上传文件列表 | —

### Slot

name | 说明
--- | ---
tip | 提示