微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 Cloudflare 直接上传 (TUS) 和 Ruby on Rails

如何解决使用 Cloudflare 直接上传 (TUS) 和 Ruby on Rails

Ruby 版本:2.4.1 Rails 版本:5.2.3 gem 安装:“tus-server”,“~> 2.3”

您好,我正在尝试使用 TUS 协议将大型视频文件上传到 Cloudflare。 tus-ruby-server 没有足够的 Cloudflare 文档供我解决以下问题。

我想返回一个包含我从 Cloudflare 返回的位置标头的响应,使用 tus-ruby-server gem,/files 端点认为数据文件夹。有没有办法自定义它以便我可以返回响应?

1. start the upload process
2. endpoint "/files" 
3. write custom code that will get the necessary information and return a response(currently the gem defaults storing the file to /data)
4. start uploading
5. finish uploading 
projectInput.addEventListener("input",function() {
        const fileTypeVideo = this.files[0].type.includes('video')
        const token        = "XXXXXX"
        const uploadLength =  900000000
        const authEmail    = "XXXX"
        const authKey      = "XXXX"
        const accId        = "XXXX"

        debugger;

    
        if (fileTypeVideo) {
            // request for one-time tokenzied URL
            async function handleRequest() {
                const init = {
                    method: 'POST',headers: {
                    'Authorization': `bearer ${token}`,'Tus-Resumable': '1.0.0','Upload-Length': uploadLength,'X-Auth-Email': authEmail,'X-Auth-Key': authKey,'Content-Type': "application/json"
                    },}
                const response = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accId}/stream?direct_user=true`,init)
                const results = await gatherResponse(response)


                return new Response(null,{headers: {'Access-Control-Expose-Headers':'Location','Access-Control-Allow-Headers':'*','Access-Control-Allow-Origin':'*','location': results}})
                }
                

                async function gatherResponse(response) {
                    const { headers } = response
                    return await headers.get('location')
                }

                handleRequest()
                .then((res) => {
                    const endPoint = "http://localhost:3000/files"

                    const options = {
                        endpoint: endPoint,headers: {
                            'Access-Control-Expose-Headers':'Location','location': res.headers.get("location")
                        },chunkSize: 50 * 1024 * 1024,resume: true,onError: function(error) {
                            console.log("Failed because: " + error)
                        },onProgress: function(bytesuploaded,bytesTotal) {
                            var percentage = (bytesuploaded / bytesTotal * 100).toFixed(2)
                            console.log(bytesuploaded,bytesTotal,percentage + "%")
                        },onSuccess: function() {
                            console.log("Download %s from %s",upload.file.name,upload.url)
                        }
                    }
    
                    const upload = new tus.Upload(document.querySelector(".videoTusuploadInput").files[0],options)
                    
                    upload.start()
    
                    // start uploading here
                })

任何帮助将不胜感激,我已经坚持了好几天......

谢谢

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。