GUpload 文件上传

所有属性都继承自element-plus

基本使用

<template>
  <GUpload v-model="files" :max-size="10" action="https://xxxx" :handleError="handleError"></GUpload>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GUpload } from 'gao-components-plus';
import { ElMessage } from 'element-plus'

const files = ref([])

function handleError(_err: Error) {
  ElMessage.error(_err?.message || '上传失败')
}

</script>

<style lang="scss" scoped>

</style>

在GForm中使用

<template>
  <g-form :model="data" label-width="100px" :columns="columns" class="pr-[40px]"></g-form>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { GForm, type ITableOrFormColumn } from 'gao-components-plus';

const data = ref({
  files: []
} as const)
const columns = computed<ITableOrFormColumn<typeof data.value>[]>(() => {
  return [
    {label: '开始时间', labelTips: '提示的消息', prop: 'date', type: 'date', required: true},
    {label: '姓名', prop: 'username', type: 'input', required: true},
    {label: '文件', prop: 'files', type: 'upload', required: true, span: 24, uploadConfig: {
      action: 'https://mock.xxx',
      maxSize: 100,
      emptyText: '---暂无文件---',
      handleResponseFilter: () => {
        return {
          fileName: '文件名称',
          fileUrl: '23'
        }
      }
    }}
  ]
})
</script>

<style lang="scss" scoped>

</style>

属性

除以下属性外，其他属性都继承自element-plus

名称	描述	类型	默认值
v-model/modelValue	文件列表	Array	-
extraData	额外参数	{query?: Record<string, any>, headers?: Record<string, any>, formdata?: Record<string, any>}	-
tips	提示文字	string	-
maxSize	文件大小限制(单位Kb)	number	-
showProgress	显示上传进度条	boolean	true
emptyText	无文件默认占位	string	暂无文件
handleResponseFilter	请求响应体过滤回调	(res: any) => GUploadFileItem	-
handleDownloadFile	下载文件回调	(file: GUploadFileItem) => any	-
handleDeleteFile	删除文件回调	(file: GUploadFileItem, index: number) => any	-
showDeleteBtn	显示删除按钮	boolean	true
showDownloadBtn	显示下载按钮	boolean	true

类型

type GUploadFileItem = {
  _uid?: string
  fileName: string
  fileUrl: string
  progress?: number
  [key: string]: any
}

emit事件

名称	描述	类型	默认值
search	搜索	(params: any) => void	-
reset	重置	() => void	-

插槽

名称	描述	类型	默认值
toolbar	工具栏	(params: any) => void	-

除以上方法外，其他方法都继承自element-plus

实例

<g-table ref="tableRef"></g-table>
<script>
const tableRef = useTemplateRef<GTableInstance>('tabelRef')

formRef.value?.GTable 返回的是element-plus的table实例

</script>