0.0.17 • Published 10 months ago

kl-uploader-base v0.0.17

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

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是否多选booleantrue
obsSiginUrlApi获取直传Url Apistring''
headers请求临时上传地址的上传头object{}
uploadRequestUrlFn文件上传请求post地址 请求函数Funtionundefined
uploadFn文件上传函数(file) => Promise<{formData:object;uploadUrl: string}>undefined
concurrent多文件上传时同时上传并发数number8
showList是否展示文件列表booleantrue
showDelete列表模式是否展示 删除文件按钮booleantrue
showFileName列表模式是否展示文件名称booleantrue
dragSort是否开启拖拽排序booleantrue
card是否是卡片展示模式booleantrue
listCardWidth卡片展示模式 预览框宽度number150
listCardHeight卡片展示模式 预览框高度number150
accept允许上传的文件类型 原生属性 accept 例子“.jpg,.png,.gif”string''
disabled是否禁用booleanfalse
imgExts判定为图片的后缀列表 用于展示图片预览图判断string[]'jpg', 'png', 'jpeg', 'gif'
limit多文件上传 文件数量限制 -1 则不限数量number-1
limitFileSize单个文件上传大小限制 单位kb -1 则不限 超出触发onFileSizeLimitdnumber500
hideOnLimited超出数量后是否隐藏上传按钮booleanfalse
disabledOnLimited超出数量后是否禁用上传按钮booleantrue
showMessageOnError出错时是否展示错误弹窗消息booleantrue
previewImageZIndex设置图片预览的 z-index 默认1000number1000
previewTeleportedimage-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 trueboolantrue

二、Events

事件名描述类型
error报错事件 文件类型错误 文件大小错误 文件数量错误Function
// 返回值
type TerrorValue = {
  code: number,
  file: TUploadFile | any,
  message: string
}

错误码code对照表

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

三、Slots

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

10 months ago

0.0.11

10 months ago

0.0.12

10 months ago

0.0.13

10 months ago

0.0.14

10 months ago

0.0.15

10 months ago

0.0.16

10 months ago

0.0.17

10 months ago

0.0.9

11 months ago

0.0.8

11 months ago

0.0.5

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.4

1 year ago

0.0.1

1 year ago