前言
場景:vue環境,UI框架爲Ant Design
Ant Design中的Upload自帶上傳功能,但是當我上傳超過1G的視頻文件時,導致文件過大而超時
於是設置customRequest
屬性,通過覆蓋默認的上傳行爲,可以自定義自己的上傳實現
引入七牛SDK
- 直接使用靜態文件地址:
https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js
- 使用 NPM 安裝
npm install qiniu-js
,import * as qiniu from "qiniu-js"
- 通過源碼編譯 ·
git clone [email protected]:qiniu/js-sdk.git
,進入項目根目錄執行npm install
,執行npm run build
,即可在dist目錄生成qiniu.min.js
分片上傳
代碼實現
<template>
<div>
<a-upload :action="uploadAction" :customRequest="uploadFile" :showUploadList="false">
<a-button>
<span v-if="obj.movieUrl">重新上傳視頻</span>
<span v-else>上傳視頻</span>
</a-button>
</a-upload>
<a-progress :percent="progress" :status="status" />
</div>
</template>
<script>
import * as qiniu from 'qiniu-js'
export default {
data() {
return {
//進度條
progress: 0,
status: 'active',
//所需內容
obj: {
durationTime: '', //時長
fsize: null, // 文件大小
mediaId: '',
mediaKey: '',
movieKey: '',
movieUrl: ''
}
}
},
computed: {
uploadAction() {
return this.GLOBAL.fileUpload; //上傳的地址(由於多個文件都需要所以定義在了全局)
}
},
methods: {
// 獲取時長
getTimes(url) {
let audioElement = new Audio(url)
audioElement.addEventListener('loadedmetadata', _event => {
this.obj.durationTime = parseInt(audioElement.duration)
})
},
// 上傳七牛token
uploadFile(fileList) {
let that = this
// 後端的接口(根據自己實際情況改)
Api.qiniuContentToken({ mediaType: 3 }).then(res => {
let qiniuToken = res.data.token
that.obj.mediaKey = res.data.mediaKey
that.obj.mediaId = res.data.mediaId
// 設置上傳的七牛key 上傳成功需要把這個值提交到後臺
let qiniuKey = fileList.file.name
// 上傳文件到七牛
let observer = {
//上傳過程的監聽函數 result參數帶有total字段的 object,包含loaded、total、percent三個屬性)
next(result) {
// 實現上傳進度條 ...
// console.log(result, '------第1步---------')
that.progress = parseInt(result.total.percent)
that.status = 'active'
if (that.progress == 100) {
that.status = 'success'
}
},
//上傳失敗回調
error(err) {
that.$message.warning(res.message)
// console.log(err.message, '--------第2步--------')
},
// 上傳完成回調
complete(res) {
// console.log(res, '-----------第3步---------')
that.obj.fsize = res.fsize
// 提交數據給後端等業務邏輯 ....
Api.qiniuUrl({ key: res.key, showPub: false }).then(res => {
that.obj.movieKey = res.data.key
that.obj.movieUrl = res.data.url
// 獲取時長
that.getTimes(that.obj.movieUrl)
})
}
}
let putExtra = {
//原文件名
fname: '',
//用來放置自定義變量
params: {},
//限制上傳文件類型
mimeType: null
}
let config = {
//存儲區域(z0:代表華東;z2:代表華南,不寫默認自動識別)
// region: qiniu.region.z2,
//分片上傳的併發請求量
concurrentRequestLimit: 2
}
let observable = qiniu.upload(fileList.file, qiniuKey, qiniuToken, putExtra, config)
// 上傳開始
let subscription = observable.subscribe(observer)
// 取消上傳
// subscription.unsubscribe();
})
}
}
}
</script>