imageUpload 图片上传

基础用法

<script setup lang="ts">
import type { BasicForm } from '@/types/form'

const formConfig = reactive<BasicForm>({
  formItems: [
    {
      label: '图片',
      value: '',
      name: 'name',
      type: 'image-upload',
    },
  ],
})
</script>

全局上传配置

TIP

代码位置

src/config/uploadConfig.ts

属性

interface Props {
  modelValue: string
  width?: string
  height?: string
  iconSize?: number
  fileSize?: number
  autoUpload?: boolean
  disabled?: boolean
  multiple?: boolean
  drag?: boolean
  limit?: number
  progressProps?: ProgressProps
  uploadFunction?: (file: any, onUploadProgress: any) => Promise<any>
  transformData?: (data: any) => Array<UploadItem>
}

参数	说明	类型	默认值	可选值
modelValue	图片路径(如果是字符串需要用英文逗号隔开)	String
width	上传框宽度	String	128px
height	上传框高度	String	128px
iconSize	上传框内图标大小	Number、String	28px
fileSize	允许上传文件的大小（单位兆）	Number、String	10
autoUpload	自动上传	Boolean	true
disabled	禁用	Boolean	false
multiple	多选	Boolean	false
drag	是否启用拖拽上传	Boolean	false
limit	允许上传文件的最大数量	Number	1
progressProps	进度条配置	ProgressProps
uploadFunction	自定义上传方法	Function
transformData	自定义数据转换	Function

插槽

插槽名	说明
tip	提示说明文字
icon	上传框内图标

Exposes

名称	说明	参数
checkUpload	检查图片是否全部上传完毕
submit	手动上传