Question

我遇到的问题与此处相同：Upload a video file by chunks带有“Content-Range”标题，但没有一个解决方案适用于我。我正在使用javascript将视频发送到Vimeo端点。我得到一张上传票，并通过另一台服务器上的php处理上传和完成上传。所有javascript都将视频数据输出到端点。

我的客户端有一个不可靠的互联网连接，因此我正在构建一个试图自动恢复的可恢复上传器。

我注意到，如果我删除“Content-Range”标题并将我的块大小设置为大于上传视频，则会正确上传。一旦我添加标题就会出错。我知道标题应该是“Content-Range”：“bytes 1001-4999 / 5000”的形式，但这会因某些原因导致问题。当我使用此格式时，chrome不会发送“Content-Length”标头，并且请求失败。 FF发送标题，但也失败了。

我为“内容范围”标题尝试了不同的组合，包括：“1001-4999 / 5000”，“范围= 1001-4999-5000”。哪些不会给出错误，但vimeo无法识别，因为当我要求上传的字节时，我总是得到上次上传的块的长度。我也试过发送第一个没有标题的块，剩下的就是它但是它的标题本身没有被正确发送。

使用Javascript：

/*
 * Uploads raw data to the server
 *
 */
var uploadRawData = function(starting_byte, ending_byte, data_to_send){
    $('.auto_uploader #play_pause_button').addClass('pause').removeClass('disabled');
    $('.auto_uploader #stop_button').removeClass('disabled');
    $('.auto_uploader #status_display').attr('class', '').fadeIn(); //Remove all other classes
    _offset_starting_from = parseInt(starting_byte) || 0;

    _uploader_process = $.ajax({
        url: _endpoint,
        type: 'PUT',
        beforeSend: function (request)
        {
            //if (starting_byte != 0){ // Send the first chunk with without content-range header
                // If this function is being called to resume a file, add the starting offset
                var content_range_header = "bytes " + starting_byte + "-" + ending_byte + "/" + _file.size;
                request.setRequestHeader("Content-Range", content_range_header);
            //}
            request.setRequestHeader("Content-Type", _file.type);
            //request.setRequestHeader("Content-Length", data.byteLength);
        },
        processData: false,
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        success: function() {
            if (ending_byte < _file.size - 1){ // Not complete (chunk mode)
                var next_upload_byte = ending_byte + 1;
                retryUpload(); // Check for uploaded bytes before next chunk upload (this creates an infinite loop since vimeo only reports the last byte uploaded, since the Content-Range header above is not being recognised) - Or
                //uploadFilePart(next_upload_byte, next_upload_byte + _chunk_size - 1); // - doesn't check uploaded bytes before send of next chunk (Uploads all parts, but vimeo only registers the last chunk)
            } else { // Complete!
                //retryUpload(); // Check to make sure the entire file was uploaded
                $('.auto_uploader #status_display').attr('class', 'tick');
                resetButtons();
                _completeFunction(); //Call user defined callback
            }
        },
        error: function(data) {
            console.log(data.responseText);
            if (!_paused && _file != null){ //Aborting (pausing) causes an error
                // Retry the upload if we fail
                if (_retry_count < _retry_limit){
                    _retry_count = _retry_count + 1;
                    console.log('Error occurred while uploading file "' + _file.name + '",  retry #' + _retry_count + ' in ' + _retry_count * 10 + ' sec');
                    setTimeout(function() {   //calls click event after a certain time
                        retryUpload(); // Call the retry upload method in 10 sec
                    }, 10000);
                } else if (_retry_count == _retry_limit){
                    //We've tried enough!});
                    resetButtons();
                    $('.auto_uploader #status_display').attr('class', 'error');
                    alert('Maximum number of retries exceeded!');
                }
            }
        },
        //error: errorHandler,
        // Form data
        data: data_to_send,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false
    });
}

我已在此处上传了测试版本：http://test.paperjet.info/auto_uploader/以及此处的完整来源：http://test.paperjet.info/auto_uploader.zip标题正在 autoUploader.js 的第121行添加。请注意，如果您使用此功能，则会将端点硬编码到index.html中，并且可能已过期。

如果有人已经解决了这个问题，或者已经使用javascript连续实现了此功能，请告诉我。

Answer 1

我遇到了同样的问题，并设法在Github上构建了一个通过块上传视频文件到Vimeo的实现：https://github.com/websemantics/vimeo-upload

它使用可恢复的PUT并显示进度条并返回上传视频的网址。

Answer 2

在服务器上获取字节的正确方法是在请求标头中执行带Content-Range: bytes */*的PUT：

var byte_request = new XMLHttpRequest();
byte_request.open('PUT', upload_url, true);
byte_request.overrideMimeType('application/octet-stream');
byte_request.setRequestHeader('Content-Range', 'bytes */*');
byte_request.send();

这应该返回308响应。在您的成功处理程序中，scape Range标题：

function onByteRequestSuccess(e) {
    var range_header,
        bytes_received;

    if (byte_request.status === 308) {
        range_header = xhr.getResponseHeader('Range');

        // The Range header will return something like "bytes=0-215235".
        // This grabs the group of numbers AFTER the "-" character,
        // which is the total bytes on the server.
        bytes_received = parseInt(range_header.split('-')[1], 10);
    }
}

至于你的Content-Type标题没有出来，我发现大多数库（jQuery和MooTools）对于这些类型的请求都不可靠。如果你仍然遇到问题，可能需要深入研究jQuery的代码库。

Vimeo使用块上传

使用Javascript：

2 个答案: