@orh/vue-chunk-upload

Vue 3 chunk upload

• 适用于 Vue 3 的分片上传扩展
• 可以配合 orh/laravel-chunk-upload 使用

Vue 3.x

1. 安装

$ yarn add @orh/vue-chunk-upload

2. 引入

import { createApp } from 'vue';
import App from './App.vue';
import VueChunkUpload from '@orh/vue-chunk-upload';

createApp(App).use(VueChunkUpload).mount('#app')

3. 使用

示例代码

• Props

属性	说明	类型	默认值
model-value	成功上传的文件路径，可以使用 v-model 双向绑定	String	空
preprocess-url	预处理地址	String	required
upload-url	上传地址	String	required
configs	可传入 axios 所有配置	Object	{}
allow-size	允许上传文件大小，单位字节，0 表示不限制	Number	0
allow-extensions	允许上传的文件类型，空数组表示不限制	Array	[]
fields-name	上传表单字段	Object	{ filename: 'filename', size: 'size', total: 'total', index: 'index', file: 'file' }

• Events

事件	说明	回调参数
invalid-size	文件大于设定值时抛出事件	错误信息
invalid-extension	选择不支持文件时抛出事件	错误信息
completed	上传成功时抛出事件	成功上传的文件路径

• Slots

名称	说明	可用参数
default	进度与展示信息自定义	v-slot="{ requestProgress, totalProgress, msg }"

本地开发/预览

1. 安装依赖

$ yarn

2. 运行

$ yarn serve

License

MIT