Upload 上传

文件上传组件，支持按钮上传、拖拽区域、图片列表和图片卡片等多种展示形式。

基础用法

点击按钮选择文件并上传

vue

<template>
  <div>
    <AUpload action="https://httpbin.org/post" />
  </div>
</template>

<script setup lang="ts">
import { AUpload } from '@lite-code/aui-vue'
</script>

拖拽上传

使用 AUploadDragger 组件开启拖拽上传区域。

点击或拖拽文件到区域上传

vue

<template>
  <div>
    <AUploadDragger action="https://httpbin.org/post" :multiple="true" />
  </div>
</template>

<script setup lang="ts">
import { AUploadDragger } from '@lite-code/aui-vue'
</script>

图片列表

设置 listType="picture" 展示图片缩略图列表。

picture 列表类型，含缩略图

vue

<template>
  <div>
    <AUpload action="https://httpbin.org/post" list-type="picture" accept="image/*" />
  </div>
</template>

<script setup lang="ts">
import { AUpload } from '@lite-code/aui-vue'
</script>

图片卡片

设置 listType="picture-card" 展示图片卡片网格。

上传

picture-card 卡片类型

vue

<template>
  <div>
    <AUpload action="https://httpbin.org/post" list-type="picture-card" accept="image/*" :multiple="true" />
  </div>
</template>

<script setup lang="ts">
import { AUpload } from '@lite-code/aui-vue'
</script>

多文件上传

设置 multiple 允许一次选择多个文件。

多文件上传

vue

<template>
  <div>
    <AUpload action="https://httpbin.org/post" :multiple="true" />
  </div>
</template>

<script setup lang="ts">
import { AUpload } from '@lite-code/aui-vue'
</script>

上传前校验

通过 beforeUpload 钩子对文件进行校验，返回 false 可阻止上传。

仅允许上传 JPG/PNG，且小于 2MB

beforeUpload 校验文件类型和大小

vue

<template>
  <div>
    <AUpload action="https://httpbin.org/post" :before-upload="beforeUpload" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">仅允许上传 JPG/PNG，且小于 2MB</p>
  </div>
</template>

<script setup lang="ts">
import { AUpload } from '@lite-code/aui-vue'

function beforeUpload(file: File) {
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isImage) {
    alert('只能上传 JPG/PNG 格式！')
    return false
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    alert('图片不能超过 2MB！')
    return false
  }
  return true
}
</script>

禁用状态

禁用上传

vue

<template>
  <div>
    <AUpload disabled />
  </div>
</template>

<script setup lang="ts">
import { AUpload } from '@lite-code/aui-vue'
</script>

API

AUpload Props

属性	类型	默认值	说明
action	string | ((file: File) => string | Promise<string>)	—	上传地址
accept	string	—	接受的文件类型
multiple	boolean	false	允许多文件
disabled	boolean	false	禁用
listType	'text' | 'picture' | 'picture-card'	'text'	列表类型
maxCount	number	—	最大文件数
fileList	UploadFile[]	—	受控文件列表
defaultFileList	UploadFile[]	[]	非受控初始文件列表
showUploadList	boolean | { showPreviewIcon?, showRemoveIcon? }	true	是否显示文件列表
beforeUpload	(file, fileList) => boolean | File | Promise<...>	—	上传前钩子
customRequest	(options: UploadRequestOption) => void	—	自定义上传请求
name	string	'file'	上传字段名

AUpload Events

事件名	回调参数	说明
onChange	(info: UploadChangeParam)	文件状态变化
onRemove	(file: UploadFile) => boolean | void	删除文件，返回 false 阻止
onPreview	(file: UploadFile)	预览文件

UploadFile

属性	类型	说明
uid	string	唯一标识
name	string	文件名
status	'uploading' | 'done' | 'error' | 'removed'	上传状态
percent	number	上传进度 0-100
url	string	文件地址（已上传）
thumbUrl	string	缩略图地址