Upload

File select Upload and drag and drop upload controls.

Basic usage

The user clicks the button and the file selection box pops up. The slot trigger is used to pass in the content that triggers the file selection, and the slot tip user passes in the prompt.

prompt message.

<template>
    <div class="kl-upload">
        <kl-upload
            v-model:files="files"
            action="http://localhost:3000/file/upload-multiple"
            name="files"
            multiple
            @success="handleSuccess"
            @error="handleError"
        >
            <template #trigger>
                <kl-button>Click to upload</kl-button>
            </template>
            <template #tip>
                <div class="upload-tip">prompt message.</div>
            </template>
        </kl-upload>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { KlMessage } from '@kunlun-design/components'
interface FileItem {
    id: string
    name: string
    percent: number
    rawFile: File
    size: number
    status: 'ready' | 'uploading' | 'success' | 'failure'
    type: string
}

const files = ref<FileItem[]>([])

const handleSuccess = () => {
    KlMessage.success('上传成功')
}

const handleError = () => {
    KlMessage.error('上传失败')
}
</script>

<style lang="scss" scoped>
.upload-tip {
    font-size: 12px;
    margin-top: 6px;
}
</style>

Limit the number of files to be uploaded

The number of uploaded files is limited by the limit attribute, and an on-exceed event is triggered when the limit is exceeded.

<template>
    <div class="kl-upload">
        <kl-upload
            v-model:files="files"
            action="http://localhost:3000/file/upload-multiple"
            name="files"
            multiple
            :limit="3"
            @success="handleSuccess"
            @error="handleError"
            @exceed="handleExceed"
        >
            <template #trigger>
                <kl-button>Click to upload</kl-button>
            </template>
        </kl-upload>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { KlMessage } from '@kunlun-design/components'
interface FileItem {
    id: string
    name: string
    percent: number
    rawFile: File
    size: number
    status: 'ready' | 'uploading' | 'success' | 'failure'
    type: string
}

const files = ref<FileItem[]>([])

const handleSuccess = () => {
    KlMessage.success('上传成功')
}

const handleError = () => {
    KlMessage.error('上传失败')
}

const handleExceed = () => {
    KlMessage.warning('文件数量超过限制')
}
</script>

<style lang="scss" scoped>
.upload-tip {
    font-size: 12px;
    margin-top: 6px;
}
</style>

User profile picture

Limits the format and size of the file that users upload in the on-before-upload hook.

jpg files with a size less than 2MB.

<template>
    <div class="kl-upload">
        <kl-upload
            v-model:files="files"
            action="http://localhost:3000/file/upload-single"
            name="file"
            :show-file-list="false"
            @success="handleSuccess"
            @error="handleError"
            @before-upload="handleBeforeUpload"
        >
            <template #trigger>
                <div class="avatar">
                    <img v-if="imageUrl" :src="imageUrl" alt="" />
                    <KlSystemAdd v-else size="50" />
                </div>
            </template>
            <template #tip>
                <div class="upload-tip">jpg files with a size less than 2MB.</div>
            </template>
        </kl-upload>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { KlMessage } from '@kunlun-design/components'
interface FileItem {
    id: string
    name: string
    percent: number
    rawFile: File
    size: number
    status: 'ready' | 'uploading' | 'success' | 'failure'
    type: string
}

const files = ref<FileItem[]>([])
const imageUrl = ref<string>('')

const handleSuccess = (respance: any, uploadFile: FileItem) => {
    KlMessage.success('上传成功')
    imageUrl.value = URL.createObjectURL(uploadFile.rawFile)
}

const handleError = () => {
    KlMessage.error('上传失败')
}

const handleBeforeUpload = (uploadFile: FileItem) => {
    console.log(URL.createObjectURL(uploadFile.rawFile))
    if (uploadFile.type !== 'image/jpeg') {
        KlMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (uploadFile.size / 1024 / 1024 > 2) {
        KlMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
</script>

<style lang="scss" scoped>
.upload-tip {
    font-size: 12px;
    margin-top: 6px;
}

.avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    transition: all 0.3s;
    color: #ccc;
    cursor: pointer;

    img {
        width: 100%;
    }

    &:hover {
        border-color: #2b8e41;
        color: #2b8e41;
    }
}
</style>

Drag-and-drop upload

Setting the drag property to true allows you to drag and drop files to a specific area for uploading.

Slots with a trigger name pass a drag property, a boolean type that determines whether the drag element is in the drag zone. You can customize the drop in style based on this property.

Drop file here or click to upload

<template>
    <div class="kl-upload">
        <kl-upload
            v-model:files="files"
            action="http://localhost:3000/file/upload-multiple"
            name="files"
            multiple
            drag
            @success="handleSuccess"
            @error="handleError"
        >
            <template #trigger="{ dragging }">
                <div :class="['drag-area', { dragging: dragging }]">
                    <div class="drag-msg">
                        <KlOtherUploadFill size="50" />
                        <p>Drop file here or click to upload</p>
                    </div>
                </div>
            </template>
        </kl-upload>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { KlMessage } from '@kunlun-design/components'
interface FileItem {
    id: string
    name: string
    percent: number
    rawFile: File
    size: number
    status: 'ready' | 'uploading' | 'success' | 'failure'
    type: string
}

const files = ref<FileItem[]>([])

const handleSuccess = () => {
    KlMessage.success('上传成功')
}

const handleError = () => {
    KlMessage.error('上传失败')
}
</script>

<style lang="scss" scoped>
.dragging {
    border-color: #2b8e41 !important;
    background-color: #f0f9eb;
}

.drag-area {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 100px 100px;
    height: 300px;
    border-radius: 10px;
    border: 2px dashed#ccc;
    transition: all 0.3s;

    .drag-msg {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #85878b;

        p {
            padding: 0;
            margin: 0;
        }
    }

    &:hover {
        border-color: #2b8e41;
    }
}
</style>

Upload API

Attribute

name	description	type	Default value	required
files	File list	FileItem[]	[]	yes
name	The field name of the file to be uploaded must be the same as that of the back-end	string	file	no
action	Request URL	string		yes
method	Request method	string	post	no
headers	Set the request header for upload	Record<string, string>		no
limit	The maximum number of files that can be uploaded	number		no
multiple	Whether multiple files are supported	boolean	false	no
show-file-list	Whether to display the list of uploaded files	boolean	true	no
data	Additional parameters that come with the upload	Record<string, any>		no
drag	Whether to enable drag-and-drop upload	boolean	flase	no
on-exceed	Hook function to execute when the limit is exceeded	(files: FileItem[], uploadFiles: FileItem[]) => void		no
on-change	Hooks that are called when the file state changes and when the upload succeeds and fails	(uploadFile: FileItem, uploadFiles: FileItem[]) => void		no
on-before-upload	The hook before the file is uploaded. The parameter is the uploaded file. If false is returned, the upload is canceled	(uploadFile: FileItem) => void		no
on-preview	Click on the hook for the uploaded file in the file list	(file: FileItem) => void		no
on-before-remove	The hook before the file is removed. If false is returned, the removal is canceled	(file: FileItem, files: FileItem[]) => boolean		no
on-remove	File list The hook for removing a file	(file: FileItem, files: FileItem[]) => void		no
on-success	The hook when the file is successfully uploaded	(response: any, uploadFile: FileItem, uploadFiles: FileItem[]) => void		no
on-error	The hook for file uploading failure	(error: Error, uploadFile: FileItem, uploadFiles: FileItem[]) => void		no
on-progress	The hook for file upload	(percent: number, uploadFile: FileItem, uploadFiles: FileItem[]) => void		no

插槽

name	description
trigger	Triggers the contents of the file selection box
tip	Prompt caption

Upload #

Basic usage #

Limit the number of files to be uploaded #

User profile picture #

Drag-and-drop upload #

Upload API #

Attribute #

插槽 #