JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 61
  • Score
    100M100P100Q67833F
  • License ISC

一个Vue大文件分片上传组件

Package Exports

  • dacong-chunked-upload
  • dacong-chunked-upload/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dacong-chunked-upload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

安装

npm install dacong-chunked-upload@latest

使用

<script setup>
import { postUploadFile, mergeUploadFile, verifyUpload, deleteFile } from './api/upload'
/*
postUploadFile : 上传分片
mergeUploadFile : 合并分片
verifyUpload : 检查文件是否存在
deleteFile : 删除文件
*/
</script>
<template>
  <ChunkedUpload :api="{ postUploadFile, mergeUploadFile, verifyUpload, deleteFile }">
    <template #placeholder-footer>
      <!-- 自定义提示内容 -->
    </template>
  </ChunkedUpload>
</template>

Props

{
    disableUpload:'', //Boolean 是否允许上传 default:false
    allowClick:'', //allowClick 是否允许点击上传 default:true
    allowDrop:'', //Boolean 是否允许拖拽上传 default:true
    fileNumberMax:'', //Number 允许上传的最大文件数 default:5
    fileSizeMax:'', //Number 允许上传的单个文件最大大小 default:50
    showPlaceholder:'', //Boolean 是否展示默认占位符 default:true
    api:'', //Object 自定义上传相关的api required: true
    minHeight:'', //Number 上传框最小高度 default:280
    listType:'' //String 上传后文件展示的样式 card/list default:card validator:['card', 'list']
    isAbsolute:'' //Boolean 是否采用 absolute 定位 default:false
}

Emits

{
    deleteFile, // 删除文件的抛出事件 得到文件的id
    uploadEnd, // 上传文件后的抛出事件 得到文件的id
    listTypeChange // listType 改变后的抛出事件 得到listType的新值
}

注意事项

  1. 这是 Vue3 的组件

  2. 这需要后端使用特定的接口去配合使用

  3. 不提供 api 无法工作

  4. api 后面会打包