用户可传输文件或提交相应的内容。
用户通过点击按钮进行文件上传
Seven-Bit-UI<template>
<div class=".upload-demo">
<sb-upload></sb-upload>
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="less">
.upload-demo{
width: 200px;
}
</style>用户通过拖曳文件到对应区域的方式进行文件上传
<template>
<div class=".upload-demo">
<sb-upload drag="true"></sb-upload>
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="less">
.upload-demo{
width: 200px;
}
</style>用户可以进行多个文件一起上传。
<template>
<div class=".upload-demo">
<sb-upload multiple="true"></sb-upload>
<sb-upload drag="true" multiple="true"></sb-upload>
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="less">
.upload-demo{
width: 200px;
}
</style>限制文件上传类型。
<template>
<div class=".upload-demo">
<sb-upload accept="image/*"></sb-upload>
<div style="height: 10px;"></div>
<sb-upload accept=".pdf"></sb-upload>
<div style="height: 10px;"></div>
<sb-upload accept=".docx"></sb-upload>
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="less">
.upload-demo{
width: 200px;
}
</style><Upload> Props #| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| multiple | 是否支持文件多选 | Boolean | false |
| accept | 上传文件类型 | String | - |
| drag | 是否支持拖曳上传 | Boolean | false |
<Upload> Events #| 事件名 | 描述 | 参数 |
|---|---|---|
| getfileslist | 上传文件后触发 | - |
<Upload> Slots #| 插槽名 | 描述 | 参数 |
|---|---|---|
| button | 默认文件上传按钮，drag="true"时不生效 | - |