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

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	自定义上传失败内

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/upload/upload