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