功能

CDN

上传单图片，展示图片（fit）以及button。也可以修改accept上传其他格式的文件，默认为图片。图片类型支持上传前裁剪

此组件依赖 cropper 组件

TIP

这里仅返回 File 类型的数据，需要自行使用 axios/fetch 等完成上传。这样方便在前端业务层面处理header、权限信息等

WARNING

图片裁剪不会做类型强校验，需要正确设置accept的值（默认为图片）

功能示例

展示区：图片上传
参数：裁剪
是否
展示区：按钮上传
展示区：自定义上传
可以自定义上传控件，点我上传
本地Blob地址

最小示例

<template>
    <Wrapper>
        <HUploadFile :http-request="httpRequest" @error="handleError" />
    </Wrapper>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import Wrapper from '@/components/simple-wrapper.vue'
import HUploadFile from '../index.vue'

const result = ref('')
const httpRequest = (file: File, done: () => void, localUrl: string) => {
    setTimeout(() => {
        result.value = localUrl
        done()
    }, 1000)
}
const handleError = (message: string) => {
    ElMessage({ message, type: 'error' })
}
</script>

API

参数

参数类型

事件