Upload 上传器

通过点击或者拖拽上传文件,图片等。

TIP

todo: form校验待开发

基础用法

通过multiple属性可以开启多选文件。通过maxSize属性可以限制上传文件的数量。通过accept属性可以限制上传文件的类型。文件变化后会触发file-change事件。

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

<template>
    <div>
        <ym-upload v-model="value"  :maxSize="5" accept="png,jpg" multiple />
    </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref([])

</script>

<style lang="scss" scoped>

</style>

拖拽上传

通过draggable属性可以开启拖拽上传。

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

<template>
    <div>
        <ym-upload v-model="value"   draggable />
    </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref([])

</script>

<style lang="scss" scoped>

</style>

远程上传

通过action属性指定上传的url，如果不传则代表默认不使远程上传。如果指定对应的路径，则会触发upload事件。

头像上传

通过type属性指定为avatar模式，可以上传头像并预览显示。

<template>
    <div>
        <ym-upload type="avatar" v-model="fileList" @file-change="onChange">
            <img v-if="imgSrc" :src="imgSrc" alt="" style="width: 180px; height: 180px; border-radius: 10px; object-fit: cover" />
        </ym-upload>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([])

const imgSrc = ref('')

const onChange = (fileList) => {
    const file = fileList[0]
            imgSrc.value = URL.createObjectURL(file.raw)
}

</script>

<style lang="scss" scoped>

</style>

图片墙

通过list-type属性指定为picture-card模式，可以上传图片并预览显示。

<template>
    <div>
        <ym-upload type="picture-list" v-model="fileList">
        </ym-upload>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([])


</script>

<style lang="scss" scoped>

</style>

Upload API

Props

参数	说明	类型	默认值
multiple	是否支持多选文件	boolean	false
accept	接受的文件类型	string	-
maxSize	最大文件大小（MB）	number	-
action	上传接口地址	string	-
disabled	是否禁用	boolean	false
type	上传组件类型	PropsType	'default'
draggable	是否支持拖拽上传	boolean	false
v-model	上传文件列表	UploadFile[]	-

Events

事件名	说明	回调参数
file-change	文件改变事件	files: UploadFile[]
upload	上传事件	files: UploadFile[]
remove	删除事件	files: UploadFile
upload-success	上传成功事件	arg: UploadArgs
upload-error	上传失败事件	arg: UploadArgs
update:modelValue	上传文件列表更新事件	files: UploadFile[]

Upload 上传器 ​

基础用法 ​

拖拽上传 ​

远程上传 ​

头像上传 ​

图片墙 ​

Upload API ​

Props ​

Events ​