kl-uploader-base 文件上传基础组件

前端直传华为OBS组件，用于系统内文件上传的统一上传组件，如果UI不满足业务 请使用 ::v-deep 修改组件自带样式

安装

npm install kl-uploader-base
yarn add kl-uploader-base

示例

<template>
  <div>
    <pre>{{ testFile }}</pre>
    <Uploader
      v-model="testFile"
      :uploadRequestUrlFn="uploadFn"
      :limit="1"
      hide-on-limited
      @error="handleError"
    ></Uploader>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import Uploader from 'kl-uploader-base'
  const testFile = ref<TUploadFile[]>([])

  const fn = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          uploadUrl: 'https://baidu.com',
          formData: {}
        })
      }, 1000)
    })
  }
  const uploadFn = () => {
    return new Promise((resolve) => {
      fn().then((res) => {
        resolve(res)
      })
    })
  }
  const handleError = (err: any) => {
    console.log(err)
  }
  // const uploadRequestUrlFn = () => {
  //   return new Promise<{
  //     formData: any
  //     uploadUrl: string
  //   }>(resolve => {
  //     resolve({
  //       /** 华为云文件直接上传额外荷载 */
  //       formData: {a: 1, b: 2},
  //       /** 华为云文件直接上传地址 */
  //       uploadUrl: 'https://baidu.com'
  //     })
  //   })
  // }
  testFile.value.push({
    obsKey: 'FLE-1788097127651577857',
    url: 'https://xxx.com/mock/java-casebase-cloud1715150469430?AccessKeyId=0X2UNOGPKXIUJE82NMF1&Expires=1715152271Signature=%2BuKWq%2FiJiYW74T3egMWpTX9FlmE%3D',
  },
  {
    obsKey: 'FLE-1788097127651577857',
    url: 'https://xxx.com/mock/java-casebase-cloud1715150469430?AccessKeyId=0X2UNOGPKXIUJE82NMF1&Expires=1715152271Signature=%2BuKWq%2FiJiYW74T3egMWpTX9FlmE%3D',
  })
</script>
<style scoped></style>

一、Attributes

|属性名|说明|类型|默认值| |-|-|-|-| |model-value/v-model|文件双向绑定数据值|UploadFile|[]| |multiple|是否多选|boolean|true| |obsSiginUrlApi| 获取直传Url Api| string| ''| |headers|请求临时上传地址的上传头|object|{}| |uploadRequestUrlFn|文件上传请求post地址 请求函数|Funtion|undefined| |uploadFn|文件上传函数|(file) => Promise<{formData:object;uploadUrl: string}>|undefined| |concurrent|多文件上传时同时上传并发数|number|8| |showList|是否展示文件列表|boolean|true| |showDelete|列表模式是否展示 删除文件按钮|boolean|true| |showFileName|列表模式是否展示文件名称|boolean|true| |dragSort|是否开启拖拽排序|boolean|true| |card|是否是卡片展示模式|boolean|true| |listCardWidth|卡片展示模式 预览框宽度|number|150| |listCardHeight|卡片展示模式 预览框高度|number|150| |accept|允许上传的文件类型 原生属性 accept|string|''| |disabled|是否禁用|boolean|false| |imgExts|判定为图片的后缀列表 用于展示图片预览图判断|string[]|['jpg', 'png', 'jpeg', 'gif']| |limit|多文件上传 文件数量限制 -1 则不限数量|number|-1| |limitFileSize|单个文件上传大小限制 单位kb -1 则不限 超出触发onFileSizeLimitd|number|500| |hideOnLimited|超出数量后是否隐藏上传按钮|boolean|false| |disabledOnLimited|超出数量后是否禁用上传按钮|boolean|true| |showMessageOnExceed|文件超出限制后是否展示ElMessage提示|boolean|true| |showMessageOnLimitedFileSize|文件大小超出限制后是否展示ElMessage提示|boolean|true| |previewImageZIndex|设置图片预览的 z-index 默认1000|number|1000| |previewTeleported|image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true|boolan|true|

二、Events

|事件名|描述|类型| |-|-|-| |error|报错事件 文件类型错误 文件大小错误 文件数量错误|Function|

三、Slots

|插槽名|描述|荷载| |-|-|-| |trigger|选择文件点击按钮插槽|-| |item|文件列表渲染插槽|file 文件对象、 $index 列表下标、 del 删除文件事件函数|