上传组件文档

简介

上传组件提供了一个方便的方式来将文件上传到服务器。它利用了 Element Plus 中的 el-upload 组件，并提供了自定义选项。

使用方法

<Upload
accept=".pdf,.doc,.docx"
showFileList
:msg="uploadMessage"
@success="handleUploadSuccess"
>
点击上传文件

<template>
  <Upload
    accept=".pdf,.doc,.docx"
    showFileList
    :msg="uploadMessage"
    @success="handleUploadSuccess"
  >
    <el-button type="primary"> 点击上传文件 </el-button>
  </Upload>
</template>

<script setup>
import Upload from '@/components/Upload/index.vue'

const uploadMessage = '文件上传成功'

const handleUploadSuccess = (data) => {
  console.log('文件已上传:', data)
}
</script>

插槽

名称	描述
default	默认插槽内容
text	上传按钮文本插槽

属性

名称	类型	默认值	描述
accept	字符串		指定文件类型，多个类型使用逗号分隔
showFileList	布尔值	false	是否在上传后显示文件列表
msg	字符串		上传成功后显示的提示信息

事件

名称	描述
success	文件上传成功时触发的事件

方法

上传组件不暴露任何自定义方法。

样式

上传组件提供了基本样式，可以使用 CSS 进行自定义。以下是一个示例：

.upload {
  font-size: 25px;
  color: #777;
}