使用可恢复的方法上传到 vimeo

Question

我正在尝试在上传时获取总视频大小的上传字节，以便能够实现上传栏并在从停止的地方中断的情况下恢复上传，我正在使用 vimeo 上传可恢复的方法；上传工作正常，但我坚持使用 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()
        }

Answer 1

我可能会迟到，但让我把我的想法留在这里。我最近遇到了这个问题，但用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()

    },

}

Answer 2

Vimeo在使用可续传方式上传时使用了Tus协议，而Tus可续传上传协议已经有纯JavaScript客户端了。所以没必要重新发明轮子..

这里： https://github.com/tus/tus-js-client