我正在尝试在上传时获取视频总大小的上传字节，以便能够实现上传栏，并在停止位置中断的情况下恢复上传，我正在将Vimeo Upload与可恢复方法上传效果很好，但我受onUploadProgress函数的束缚。
let vimeoAccessTokens = process.env.MIX_VIEMO_ACCESS_TOKEN
let videoCreate = Axios.create()
delete videoCreate.defaults.headers.common['X-CSRF-TOKEN']
delete videoCreate.defaults.headers.common['X-Requested-With']
videoCreate({
method: 'POST',
url: 'https://api.vimeo.com/me/videos',
headers: {
'Authorization': 'bearer ' + vimeoAccessTokens,
'Accept': 'application/vnd.vimeo.*+json;version=3.4',
'Content-Type': 'application/json'
},
data: {
"upload": {
"approach": "tus",
"size": this.videoFile.size
}
}
}).then(response => {
let videoUri = response.data.uri
let uploadLink = response.data.upload.upload_link
let videoUpload = Axios.create()
videoUpload({
method: 'PATCH',
url: uploadLink,
headers: {
'Tus-Resumable': '1.0.0',
'Upload-Offset': 0,
'Content-Type': 'application/offset+octet-stream',
'Accept': 'application/vnd.vimeo.*+json;version=3.4'
},
data: this.videoFile,
onUploadProgress(){
Axios.head(uploadLink, {
headers: {
'Tus-Resumable': '1.0.0',
'Accept': 'application/vnd.vimeo.*+json;version=3.4'
}
}).then(uploadResp => {
let uploaded = uploadResp.headers['upload-offset']
let total = uploadResp.headers['upload-length']
console.info(uploaded +'of'+ total)
})
}
}).then(resp => {
console.log(resp.status)
}).catch(err => {
window.handleErrors(err)
})
}).catch(error => {
window.handleErrors(error)
})
event.preventDefault()
}
Vimeo在使用可恢复方法上传时使用Tus协议，并且已经有一个纯的JavaScript客户端可用于tus可恢复上传协议。因此，无需重新发明轮子。
我可能会迟到，但让我把想法留在这里。我最近遇到了这个问题，但是用uppy-tus解决了。它带有一个不错的用户界面，对我来说非常酷，使您的工作变得超级轻松这是使用Vue的示例代码
<script>
import Axios from 'axios'
const Uppy = require('@uppy/core')
const XHRUpload = require('@uppy/xhr-upload')
const Dashboard = require('@uppy/dashboard')
const tus = require("@uppy/tus")
require('@uppy/core/dist/style.css')
require('@uppy/dashboard/dist/style.css')
export default {
data() {
return {
//store Vimeo access token in .env
token: process.env.VUE_APP_VIMEO_ACCESS_TOKEN,
url: '',
video: '',
video_file: {
name: '',
size: '',
upload_link: ''
},
uppy: null
}
},
methods: {
//load uppy on mounted
loadUppy() {
this.uppy = Uppy({
restrictions: {
maxNumberOfFiles: 1,
minNumberOfFiles: 1,
allowedFileTypes: ['video/*']
},
//
onBeforeFileAdded: (currentFile, files) => {
if (currentFile.name) {
console.log(currentFile)
this.video_file.name =currentFile.name
this.video_file.size = currentFile.data.size
this.video_file.type = currentFile.type
//console.log(this.video_file)
return true
}
return false
},
})
.use(Dashboard, {
trigger: '.UppyModalOpenerBtn',
inline: true,
target: '.DashboardContainer',
replaceTargetContent: true,
showProgressDetails: true,
hideUploadButton: true,
height: 250,
allowMultipleUploads: false
})
},
uploadVideo() {
const body = {
"upload" : {
"approach" : "tus",
"size" : this.video_file.size
},
"name" : this.video_file.name
};
// get vimeo upload link
Axios.post('https://api.vimeo.com/me/videos/',body,{
headers: {
'Content-Type': 'application/json',
'Accept': 'application/vnd.vimeo.*+json;version=3.4',
'Authorization': 'bearer ' + this.token
}
}).then((response) => {
console.log(response)
let videoUri = response.data.uri
this.video_file.upload_link = response.data.upload.upload_link
this.uppy.use(tus, {
uploadUrl: this.video_file.upload_link,
metadata: {
filename: this.video_file.name,
filetype: this.video_file.type,
},
resume: true,
autoRetry: true,
retryDelays: [0, 1000, 3000, 5000]
})
this.uppy.upload().then((result) => {
console.info('Successful uploads:', result.successful)
if (result.failed.length > 0) {
console.error('Errors:')
result.failed.forEach((file) => {
console.error(file.error)
})
}
})
}).catch((errors) => {
console.log(errors)
})
},
},
mounted() {
this.loadUppy()
},
}