@orh/vue-chunk-upload NPM

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

demo

Vue 3.x

安装

$ yarn add @orh/vue-chunk-upload

引入

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

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

使用

示例代码

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`	上传成功时抛出事件	成功上传的文件路径