功能

用于一次上传多张图片，支持拖拽排序

TIP

此组件依赖 vuedraggable-es，使用时需要

npm i vuedraggable-es@^4.1.1

功能示例

展示区
结果
[ { "name": "山.png", "size": 9988, "type": "image/jpeg", "url": "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", "uid": 1625899269286 } ]

最小示例

<template>
    <Wrapper>
        <ElButton @click="handleClick">打开</ElButton>
        <HDialogUploadImages
            v-model="result"
            v-model:visible="visible"
            :http-request="httpRequest"
            :limit="20"
            @error="handleError"
        />
    </Wrapper>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { defaultWindow } from '@wfrog/utils'
import Wrapper from '@/components/simple-wrapper.vue'
import HDialogUploadImages from '../index.vue'
import type { IUploadFile } from '../props'

const result = ref<(File | IUploadFile)[]>([])
const visible = ref(false)

const handleClick = () => {
    visible.value = true
}

const httpRequest = async (file: File) => {
    if (!defaultWindow) { return }
    const myFile = {
        name: file.name,
        size: file.size,
        type: file.type,
        url: defaultWindow.URL.createObjectURL(file),
    }
    return myFile
}

const handleError = (message: string) => {
    ElMessage.error({ message })
}
</script>

API

参数

参数类型

事件