IkFileUpload

遵循新版UI规范，支持上传中、已上传、上传错误等多种状态

自定义图标使用效果图

自定义excal文件图标插槽使用

自定义excal文件图标为iconfont图标

自定义excal文件图标为图片

Props

  interface customDataInterface {
    excal: any,
    word: any,
    txt: any,
    zip: any,
    image: any,
    video: any,
    ppt: any,
    pdf: any,
    audio: any,
    unknow: any
  }
  interface iconFieldInter {
    type: string,
    icon: string,
  }
  interface fieldInter {
    name: string,
    url: string,
    suffix: string,
  }

参数	说明	类型	默认值
action	上传地址	String	''
limit	最多上传图片数量	Number	5
size	单张图片大小 MB	Number	50
accept	允许的格式	String	"*"
preview	预览模式 - 为true时不显示上传元素	Boolean	false
multiple	支持多选	Boolean	true
tip	显示提示	Boolean	false
tipText	提示文字	String	''
modelValue	回显列表数据格式： [{url: '', name: ''}, {url: '', name: ''}]	Array as PropType<Array<{ url: string } | UploadFile>>	[]
defaultFileds	回显列表数据映射字段	Object as PropType<fieldInter>	{ name:'name', url:'url', suffix:'suffix'}
customIconData	自定义替图标数据	Object as PropType<customDataInterface>	{}
customIconFields	自定义图标映射字段	Object as PropType<iconFieldInter>	{ type: 'type', icon: 'icon', }

插槽

名称	描述	携带参数
trigger	触发文件选择框的内容	-
fileIcon	自定义图标插槽，使用时需要判断所有的文件类型（若使用插槽customIconData配置不生效，默认图标不显示）	file

事件

名称	说明	类型
success	上传图片成功后触发	(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void
delete	移除图片后触发	(file) => void

示例代码

默认使用

  <template>
    <!-- 示例 -->
    <IkUploadFile :action="action" @success="handleSuccess" />
  </template>

插槽使用

  <template>
    <!-- 示例 -->
    <IkUploadFile :tip="true" 
    action="https://manycode.o0o0oo.com/api/server/oss/upload" @success="handleConsole" >
      <template #fileIcon="{ file }">
        <span v-if="file.raw.type.includes('sheet')" style="background: #34b33f;padding: 12px 4px;color: #fff;border-radius: 10%;">excel</span>
      </template>
    </IkUploadFile>
  </template>

自定义图标使用

  <template>
    <!-- 示例1 -->
    <IkUploadFile :tip="true" :customIconData="{excal: {type: 'icon',
      icon: 'iconfont icon-qitagongneng-copy'}}"
      action="https://manycode.o0o0oo.com/api/server/oss/upload" 
      @success="handleConsole" >
    </IkUploadFile>
    <!-- 示例2 -->
    <IkUploadFile :tip="true" :customIconData="{excal: {type: 'img',
      icon: '../public/logo.svg'}}"
      action="https://manycode.o0o0oo.com/api/server/oss/upload" 
      @success="handleConsole" >
    </IkUploadFile>
  </template>

上传文件回显

  <script setup>
    const fileList = ref([
        {
          fileName: 'aass.docx',
          url: 'https://img2.baidu.com/it/u=2080244369,3435160753&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1693414800&t=3c093540ac60bfaa2f7bad59dc91d980',
          suffix: '.docx'
        }
      ])
  </script>
  <template>
    <!-- 示例 -->
    <IkUploadFile 
      :tip="true" 
      v-model="fileList"
      :defaultFileds="{ name: 'fileName' , suffix: 'suffix', url: 'url'}"
      action="https://manycode.o0o0oo.com/api/server/oss/upload" 
      @success="handleConsole" />
  </template>

文件回显效果