Upload 上传
文件上传，支持图片与文件
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/upload.md#">基础用法
默认支持图片和图片一起上传
::: snippet 配置项action、headers、data与Element中的el-upload相同，值的格式为逗号分隔的字符串
<template>
<eagle-upload v-model="model" action="http://xxx" :headers="headers" :data="uploadData"></eagle-upload>
</template>
<script>
export default {
data() {
return {
model: '',
headers: {
'Authorization': 'Bearer xxx'
},
uploadData: {
module: 'tms'
}
}
},
}
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/upload.md#">限制上传
可以限制图片上传或者文件上传
::: snippet type设置上传模式，limit限制上传数量，file-type限制文件上传格式
<template>
<div>
<div>
<div>文件上传：</div>
<eagle-upload v-model="file" type="file" action="http://xxx" :limit="1" :headers="headers" size="mini"></eagle-upload>
</div>
<div>
<div>图片上传：</div>
<eagle-upload v-model="image" type="image" action="http://xxx" :limit="2" :headers="headers" size="mini"></eagle-upload>
</div>
<div>
<div>限制文件格式：</div>
<eagle-upload v-model="fileType" type="file" file-type="pdf" action="http://xxx" :limit="1" :headers="headers" size="mini"></eagle-upload>
</div>
</div>
</template>
<script>
export default {
data() {
return {
file: '',
image: '',
fileType: '',
headers: {
'Authorization': 'Bearer xxx'
}
}
},
}
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/upload.md#">多选与拖拽
可以多选上传及拖拽上传
::: snippet multiple设置多选上传，drag设置拖拽上传
<template>
<eagle-upload v-model="model" action="http://xxx" :headers="headers" multiple drag :limit="3"></eagle-upload>
</template>
<script>
export default {
data() {
return {
model: '',
headers: {
'Authorization': 'Bearer xxx'
},
}
},
}
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/upload.md#">角标删除与提醒
默认支持角标删除样式，以及配置删除前确认提示
::: snippet corner-close开启角标删除，delete-confirm设置删除确认提示
<template>
<eagle-upload v-model="model" action="http://xxx" :headers="headers" multiple drag corner-close delete-confirm :limit="3"></eagle-upload>
</template>
<script>
export default {
data() {
return {
model: '',
headers: {
'Authorization': 'Bearer xxx'
},
}
},
}
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/upload.md#">只读模式
可配置只读模式用于显示
::: snippet readonly开启只读模式
<template>
<eagle-upload v-model="model" corner-close readonly></eagle-upload>
</template>
<script>
export default {
data() {
return {
model: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp3,http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4,http://clips.vorwaerts-gmbh.de/big_buck_bunny.pdf',
}
},
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value | 值 | String | - | - type | 上传类型 | String | all,image,file | all file-type | 上传文件类型限制,仅在type为file时生效 | String | - | - disabled | 是否禁用 | Boolean | - | false multiple | 是否支持多选文件 | Boolean | - | false limit | 最大上传数量 | Number | - | - drag | 是否启用拖拽上传 | Boolean | - | false draggable | 是否启用拖拽改变顺序(需要项目安装vuedraggable并注册为draggable) | Boolean | - | false action | 上传地址 | String | - | - headers | 自定义请求头 | Object | - | {} delete-confirm | 删除图片时弹出确认框 | Boolean | - | false data | 上传时附带的额外参数 | Object | - | {} name | 上传文件字段名 | String | - | file response-filter | 返回值处理函数 | Function | - | - before-upload | 上传文件之前的钩子 | Function | - | - size | 大小 | String | mini, small, large | large http | HTTP请求库 | Function | - | - http-request | 自定义请求方法 | Function | - | - corner-close | 是否开启角标删除按钮 | Boolean | - | false
Events 事件
事件名称|说明|回调参数 -|-|- upload | 单个文件上传成功后的事件 | 请求response
Slots 插槽
名称|说明|方法 -|-|- image-viewer | 自定义图片查看器 | show, index, list, close, open