1.1.1 • Published 2 years ago

bjy-v3-upload

Licence

ISC

Version

1.1.1

Deps

Size

458 kB

Vulns

Weekly

Summary Dependency Versions

bjy-v3-upload

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

[ 查看演示 Demo ] [ 查看 Demo源码, vue2版本，vue3类似 ]

一、安装使用

1. 安装

# npm 安装
npm install bjy-v3-upload

# yarn 安装
yarn add bjy-v3-upload

2. 引入 bjy-v3-upload

Vue 3 组件内引入

npm install bjy-v3-upload
import bjyVUpload from "bjy-v3-upload"
components: {
  bjyVUpload
}

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	上传进度

Keywords

upload