wview组件库Appearance
Upload 文件上传
上传组件建议拖拽或复制出实例使用。
基础用法
通过slot你可以传入自定义的上传按钮类型和文字提示，点击按钮即可完成单个文件的上传。
展开代码
vue
<template>
<div class="box">
<Upload>
<Button type="primary" size="large">文件上传</Button>
</Upload>
</div>
</template>
<script lang="ts" setup>
import { Button, Upload } from 'wviewui'
</script>
<style lang="less" scoped></style>
文件多选
通过multiple你可以指定是否允许一次性选择并上传多个文件。
展开代码
vue
<template>
<div class="box">
<Upload :multiple="true">
<Button type="primary" size="large">文件上传</Button>
</Upload>
</div>
</template>
<script lang="ts" setup>
import { Button, Upload } from 'wviewui'
</script>
<style lang="less" scoped></style>
类型限定
通过accept你可以对上传的文件类型进行指定，仅允许上传指定类型的文件。此处传入了image/*,即仅允许上传图片。有关限制可接受的文件类型的更多说明，详见这里。
展开代码
vue
<template>
<div class="box">
<Upload accept="image/*">
<Button type="primary" size="large">文件上传</Button>
</Upload>
</div>
</template>
<script lang="ts" setup>
import { Button, Upload } from 'wviewui'
</script>
<style lang="less" scoped></style>
拖拽上传
通过drag你可以对上传文件的方式进行指定，当值为true时切换为拖拽上传，你可以将文件拖拽到特定区域以进行上传。
展开代码
vue
<template>
<div class="class">
<Upload :drag="true"></Upload>
</div>
</template>
<script lang="ts" setup>
import { Upload } from 'wviewui'
</script>
<style lang="less" scoped></style>