文件上传

用于文件上传

基础用法（自动上传）

自动上传是指由组件自动上传到服务器，并直接返回 URL 地址。

未选择任何文件
按这里上传
未选择任何文件
<cb-form-group label="默认按钮文案：">
  <cb-upload v-model="test1" />
</cb-form-group>
<cb-form-group label="自定义按钮文案：">
  <cb-upload v-model="test13">按这里上传</cb-upload>
</cb-form-group>

禁用状态（自动上传）

未选择任何文件
<cb-form-group label="演示：">
  <cb-upload v-model="test2" disabled />
</cb-form-group>

不同尺寸（自动上传）

未选择任何文件
未选择任何文件
未选择任何文件
未选择任何文件
<cb-form-group label="超大尺寸：">
  <cb-upload large v-model="test3" />
</cb-form-group>
<cb-form-group label="默认尺寸：">
  <cb-upload v-model="test4" />
</cb-form-group>
<cb-form-group label="小型尺寸：">
  <cb-upload small v-model="test5" />
</cb-form-group>
<cb-form-group label="超小尺寸：">
  <cb-upload tiny v-model="test6" />
</cb-form-group>

不同颜色（自动上传）

未选择任何文件
未选择任何文件
未选择任何文件
未选择任何文件
未选择任何文件
<cb-form-group label="演示：">
  <cb-upload theme="primary" v-model="test7" />
</cb-form-group>
<cb-form-group label="演示：">
  <cb-upload theme="success" v-model="test8" />
</cb-form-group>
<cb-form-group label="演示：">
  <cb-upload theme="info" v-model="test9" />
</cb-form-group>
<cb-form-group label="演示：">
  <cb-upload theme="warning" v-model="test10" />
</cb-form-group>
<cb-form-group label="演示：">
  <cb-upload theme="danger" v-model="test11" />
</cb-form-group>

手动上传

手动上传是表示传统型文件上传，也就是组件直接返回文件二进制数据，并由开发者手动上传给服务器。

自动上传支持的尺寸和颜色等内容，手动上传也同样支持。

未选择任何文件
<cb-form-group label="演示：">
  <cb-upload v-model="test12" legacy />
</cb-form-group>

属性

参数 说明 类型 可选值 默认值
v-model 绑定值，自动上传组件返回 URL 字符串，手动上传组件返回 File 对象。 string — —
legacy 是否是手动上传 boolean — false
preview 是否显示文件预览，支持图片、视频和音频的预览，不支持的文件自动关闭预览。 boolean — true
preview-size 预览区域大小，单位像素 string — 100
theme 按钮风格或类型 string default / primary / success / info / warning / danger default
disabled 是否禁用状态 boolean — false
large 是否超大按钮 boolean — false
small 是否小型按钮 boolean — false
tiny 是否超小按钮 boolean — false
block 是否块状按钮 boolean — false
flat 是否平面按钮 boolean — false
url 自动上传组件上传的目标接口 URL，没特殊情况请不要设置这个属性。 string — /service_api/activityTemplate/activityTemplate/uplodeFile