安装

npm install dacong-chunked-upload@latest

使用

<script setup>
import { postUploadFile, mergeUploadFile, verifyUpload, deleteFile } from './api/upload'
import { ChunkedUpload, uploadFile } from 'dacong-chunked-upload'
/*
uploadFile为定义好的上传函数，upload(file,taskArr)
file为文件
taskArr为响应式数组 🌰const taskArr = ref([])
*/  
/*
postUploadFile : 上传分片
mergeUploadFile : 合并分片
verifyUpload : 检查文件是否存在
deleteFile : 删除文件
*/
</script>
<template>
  <ChunkedUpload :api="{ postUploadFile, mergeUploadFile, verifyUpload, deleteFile }">
    <template #placeholder-footer>
      <!-- 自定义提示内容 -->
    </template>
	<template #content>
      <!-- 自定义内部内容，只有在showPlaceholder为false的时候生效 -->
    </template>
	<template #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
    fileList:'', // Array 展示的文件列表 default:[]
    background:'' // String 自定义背景色 default:''
}

Emits

{
    deleteFile, // 删除文件的抛出事件 得到文件的id
    uploadEnd, // 上传文件后的抛出事件 得到文件的id
}

注意事项

1. 这是 Vue3 的组件

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

3. 不提供 api 无法工作

4. api 后面会打包