带进度条的base64视频上传

Backbone.js base64 video upload with progress bar

本文关键字：视频 base64 更新时间：2023-09-26

我有一个脚本，通过骨干/ajax发送一个base64视频到服务器:

    video = new AccountVideo();
    video.set({video: imageFile});
    this.collection.create(video, {
        // wait for return status from server
        wait: true,
        success: function(model, response) {
            App.utils.notifyEnd('Video is queued for transcoding.');
            accountVideoListView.render();
        },
        error: function(model, xhr) {
            App.utils.notifyEnd(xhr.responseJSON.message, 'error');
        }
    });

我正试图找到一个方法来创建一个上传进度条类似于这是如何工作的，但在骨干完全。

    var ajax = new XMLHttpRequest(); 
            ajax.upload.addEventListener("progress", progressHandler, false); 
            ajax.addEventListener("load", completeHandler, false); 
            ajax.open("POST", "/api/accounts/videos"); 
            ajax.send(imageFile); 
        function progressHandler(event){ 
            var percent = (event.loaded / event.total) * 100; 
            console.log(percent); 
        } function completeHandler(event){ 
        }

I tried:

     var self = this;
     xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                xhr.onprogress = self.handleProgress;
                return xhr;
            }
     handleProgress: function(evt){
       var percentComplete = 0;
       if (evt.lengthComputable) {  
          percentComplete = evt.loaded / evt.total;
        }
        console.log(Math.round(percentComplete * 100)+"%");
      }

但是在视频结束后它只会显示0%。我想我接近了，只是需要一个指针。谢谢!

好的，所以我环顾四周，发现了更多关于xhr:函数发生的事情。

下面是工作

 // add image model to collection
    this.collection.create(video, {
        // wait for return status from server
        wait: true,
        success: function(model, response) {
            App.utils.notifyEnd('Video is queued for transcoding.');
            accountVideoListView.render();
        },
        error: function(model, xhr) {
            App.utils.notifyEnd(xhr.responseJSON.message, 'error');
        },
        xhr: function() {
        myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',showProgress, false);
            } else {
                console.log("Upload progress is not supported.");
            }
        return myXhr;
        }
    });
    function showProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded / evt.total) * 100;
            console.log(percentComplete);
        }  
    }