bjy-v-upload

一个基于vue-upload-component的分片上传组件

[ 查看演示 Demo ] [ 查看 Demo源码 ]

一、安装使用

1. 安装

# npm 安装
npm install bjy-v-upload

# yarn 安装
yarn add bjy-v-upload

2. 引入 bjy-v-upload

Vue 2 组件内引入

npm install bjy-v-upload
import bjyUpload from "bjy-v-upload"
components: {
  bjyUpload
}

Vue2 全局引入

import bjyUpload from "bjy-v-upload"

const app = createApp(App)
app.use(bjyUpload)
app.mount('#app')
<bjy-v-upload ...>

3. 代码中使用

重要！ 获取上传（getUploadUrl ）和续传（getResumeUploadUrl ）接口需要替换为客户调用百家云 openapi 的接口 重要！ https://dev.baijiayun.com/wiki/detail/4#-h5-7 , https://dev.baijiayun.com/wiki/detail/4#-h5-9

<bjy-v-upload
    ref="upload"
    v-model="fileList"
    multiple
    input-id="video"
    :file-filter="uploadBefore"
    :on-file-change="onFileChange"
    :get-upload-url="getUploadUrl"
    :get-resume-upload-url="getVideoResumeUploadUrl"
    @upload-click="handleUploadVideo"
    @upload-complete="uploadComplete"
    @upload-progress="uploadProgress"
    @upload-failed="uploadFailed"
    @upload-canceled="uploadCanceled"
>
    <button>选择文件</button>
</bjy-v-upload>

二、文档

1. props

名称	功能	默认值	可选值
value / v-model	待上传列表	[]	[file]file对象拓展属性见下文
inputId	input id属性	file	String
resumeExpireTime	本地记录的分片信息的过期时间	0.25 * 86400000	timestamp
resumeUploadMaxCount	获取续传数据的最大尝试次数	3	Number
chunkUploadMaxCount	分片上传的最大尝试次数	5	Number
fileFilter	校验文件	null	(file, prevent) => {// prevent() 校验不通过阻止文件选择}
onFileChange	选择文件	null	(file) => {}
getUploadUrl	获取上传链接	null	() => {return Promise.resolve({fid: result.video_id,uploadUrl: result.upload_url,})}
getResumeUploadUrl	获取续传链接	null	() => {return Promise.resolve({fid: result.video_id,uploadUrl: result.upload_url,uploaded: result.upload_size,id: result.video_id})}

2. 可用回调方法

• @resume-fail 续传失败
• @upload-progress (index, percent) => {} 文件下标，上传进度
• @upload-complete (fid, index, filename) => {} 上传成功文件id，下标，文件名
• @upload-failed 上传失败
• @upload-canceled 上传取消
• @upload-click 点击选择文件按钮

3. 内置方法

通过 this.$refs.upload 调用

方法

方法	说明
this.$refs.upload.startUpload()	开始上传
this.$refs.upload.uploadFile(file or index)	上传指定文件
this.$refs.upload.pauseAll()	暂停所有
this.$refs.upload.pause(index)	暂停指定文件
this.$refs.upload.addFiles()	添加文件到待上传列表, 接受[file]或者file
this.$refs.upload.getFileList()	获取上传列表
this.$refs.upload.removeFile(file or index)	删除指定文件
this.$refs.upload.clear()	清空上传列表

4. file拓展属性

通过value/v-model传入的[file]file数组，组件内部会对file对象进行进一步处理，拓展的属性如下，可能会对你的业务有帮助，请勿修改下面属性

属性	说明
status	0: 待上传, 1: 上传中, 2: 暂停, 3: 失败, 4: 成功
progress	上传进度