# ui-upload 文件上传组件
版本：v2.3.11
文件上传组件用于上传文件，支持单文件上传、多文件上传、拖拽上传等功能
# 基本使用
<template>
<div class="upload-demo">
<ui-upload :action="'/api/upload'" @success="onSuccess" @fail="onFail">
<ui-button type="primary">点击上传</ui-button>
</ui-upload>
</div>
</template>
<script setup>
const onSuccess = (res) => {
console.log('上传成功', res);
};
const onFail = (err) => {
console.log('上传失败', err);
};
</script>
<style scoped>
.upload-demo {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
# Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
action | String | - | 上传接口地址 |
name | String | 'file' | 文件上传字段 |
multiple | Boolean | false | 是否支持多文件上 |
accept | String | - | 接受的文件类 |
maxSize | Number | - | 最大文件大小，单位：B |
maxCount | Number | - | 最大上传文件数 |
disabled | Boolean | false | 是否禁用上传 |
drag | Boolean | false | 是否启用拖拽上传 |
autoUpload | Boolean | true | 是否自动上传 |
headers | Object | - | 上传请求 |
data | Object | - | 上传请求参数 |
withCredentials | Boolean | false | 是否携带 Cookie |
compressedSize | Number | Number.MAX_VALUE | 压缩后的最大文件大小，单位：B |
# Events
| 事件 | 说明 | 回调参数 |
|---|---|---|
success | 上传成功时触 | (response: Object, file: File) 上传成功响应和文件对 |
fail | 上传失败时触 | (error: Error, file: File) 错误对象和文件对 |
progress | 上传进度变化时触 | (progress: Number, file: File) 上传进度百分比和文件对象 |
change | 文件列表变化时触 | (fileList: Array) 文件列表 |
beforeUpload | 上传前触发，返回值 false 可取消上 | (file: File) 文件对象 |
afterRead | 文件读取完成后触 | (file: File) 文件对象 |
# Methods
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
upload | 手动触发上传 | (file: File) 文件对象 | - |
abort | 取消上传 | (file: File) 文件对象 | - |
clear | 清空文件列表 | - | - |
# Slots
| 名称 | 说明 |
|---|---|
default | 上传按钮内容 |
drag | 拖拽上传区域内容 |
preview | 自定义文件预览内 |
uploading | 自定义上传中内容 |
success | 自定义上传成功内 |
error | 自定义上传失败内 |
# 压缩图片上传
<template>
<div class="upload-compressed-demo">
<ui-upload
:action="'/api/upload'"
:compressed-size="1024 * 1024" <!-- 压缩到1MB -->
@success="onSuccess"
@fail="onFail"
>
<ui-button type="primary">点击上传（自动压缩）</ui-button>
</ui-upload>
</div>
</template>
<script setup>
const onSuccess = (res) => {
console.log('上传成功', res);
};
const onFail = (err) => {
console.log('上传失败', err);
};
</script>
<style scoped>
.upload-compressed-demo {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>