dialog-upload-images

功能

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

TIP

此组件依赖 vuedraggable-es-fix，考虑此组件不一定会被用到，默认不安装 vuedraggable-es-fix。因此使用 tags 组件时需要

npm i vuedraggable-es-fix@^1.0.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>
        <VcDialogUploadImages
            v-model="result"
            v-model:visible="visible"
            :http-request="httpRequest"
            :limit="20"
            @error="handleError"
        />
    </Wrapper>
</template>

<script lang="ts" setup>
import type { IUploadFile } from '../dialog-upload-images'
import { ElMessage } from 'element-plus'
import VcDialogUploadImages from '../dialog-upload-images.vue'

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

function handleClick() {
    visible.value = true
}

async function httpRequest(file: File) {
    const myFile = {
        name: file.name,
        size: file.size,
        type: file.type,
        url: window.URL.createObjectURL(file),
    }
    return myFile
}

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

API

参数

参数类型

事件