kl-uploader-base

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 例子“.jpg,.png,.gif”	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
showMessageOnError	出错时是否展示错误弹窗消息	boolean	true
previewImageZIndex	设置图片预览的 z-index 默认1000	number	1000
previewTeleported	image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true	boolan	true

二、Events

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

// 返回值
type TerrorValue = {
  code: number,
  file: TUploadFile | any,
  message: string
}

错误码code对照表

1001：超出可上传文件数量
1002：上传格式不允许
1003：上传文件大小超出限制
1004：文件上传过程中产生错误（跟服务器通信）

三、Slots

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