如何实现秒传与断点续传

2betop commented 10 years ago

因为这是小众需求，所以默认没有做在webuploader里面，而只是提供hook接口，让用户很简单的扩展此功能。

那么，都有哪些重要的hook接口呢？

before-send-file 此hook在文件发送之前执行
before-file 此hook在文件分片（如果没有启用分片，整个文件被当成一个分片）后，上传之前执行。
after-send-file 此hook在文件所有分片都上传完后，且服务端没有错误返回后执行。
...

对于秒传来说，其实就是文件上传前，把内容读取出来，算出md5值，然后通过ajax与服务端验证进行验证, 然后根据结果选择继续上传还是掉过上传。

像这个操作里面有两个都是异步操作，文件内容blob读取和ajax请求。所以这个handler必须是异步的，怎样告诉组件此handler是异步的呢？只需要在hanlder里面返回一个promise对象就可以了，这样webuploader就会等待此过程，监听此promise的完成事件，自动继续。

以下是此思路的简单实现。

Uploader.register({
    'before-send-file': 'preupload'
}, {
    preupload: function( file ) {
        var me = this,
            owner = this.owner,
            server = me.options.server,
            deferred = WebUploader.Deferred();

        owner.md5File( file.source )

            // 如果读取出错了，则通过reject告诉webuploader文件上传出错。
            .fail(function() {
                deferred.reject();
            })

            // md5值计算完成
            .then(function( md5 ) {

                // 与服务安验证
                $.ajax(server, {
                    dataType: 'json',
                    data: {
                        md5: ret
                    },
                    success: function( response ) {

                        // 如果验证已经上传过
                        if ( response.exist ) {
                            owner.skipFile( file );

                            console.log('文件重复，已跳过');
                        }

                        // 介绍此promise, webuploader接着往下走。
                        deferred.resolve();
                    }
                });
            });

        return deferred.promise();
    }
});

关于断点续传

其实就是秒传分片，跟秒传整个文件是一个思路。关于md5验证这块，可以ajax请求验证，也可以在文件秒传验证的时候，把已经成功的分片md5列表拿到，这样分片验证的时候就只需要本地验证就行了，减少请求数。

具体实现和思路请查看这里https://github.com/fex-team/webuploader/issues/139

sky20054122 commented 9 years ago

@XGHeaven 你最好使用js调试一下，看看文件传入MD5计算方法时候的大小，起止位置等属性，如果是图片还要看看是不是压缩了。

sky20054122 commented 9 years ago

@beyond290239 你的代码里面没有使用deferred ,后台合并成则deferred.resolve(); 然后return deferred.promise();

/**
     * method:after-send-file
     * 在所有分片都上传完毕后，且没有错误后request，用来做分片验证，此时如果promise被reject，当前文件上传会触发错误。
     * para:file: File对象
     */
    uploader.register({
        'after-send-file' : 'chunkUploadFinish'
    }, {
        chunkUploadFinish : function(file) {
            insertLog("<br>"+moment().format("YYYY-MM-DD HH:mm:ss")+" after-send-file  chunkUploadFinish:文件 "+file.name + " 分片上传完成;");
            //var me = this; 
            //var owner = this.owner;
            var deferred = $.Deferred();
            var fileMd5 = file.wholeMd5;            
            var chunks = file.chunks;
            if(chunks > 1){//TODO 向server发送文件合并请求，根据结果决定文件上传成功与否

                $('#' + file.id).find('span.state').text("合并文件...");
                $.ajax({
                    cache : false,      
                    async:true,         
                    type : "post",
                    dataType : "json",
                    url : baseUrl + "/fileUpload/fileMerge",
                    data : {
                        fileMd5 : fileMd5,
                        isShared : $("#isShared").val(),
                        fileType : $("#fileType").val(),
                        ext:file.ext  //文件扩展名称
                    },
                    success : function(result) {
                        if (result.result) {
                            insertLog("<br>"+moment().format("YYYY-MM-DD HH:mm:ss")+" after-send-file  chunkUploadFinish:文件 "+file.name + " 合并文件成功");
                            $('#' + file.id).find('span.state').text("合并文件成功");
                            insertLog("<br>"+moment().format("YYYY-MM-DD HH:mm:ss")+" after-send-file  chunkUploadFinish:文件 "+file.name + " server响应："+result.msg);
                            deferred.resolve();
                        } else {
                            insertLog("<br>"+moment().format("YYYY-MM-DD HH:mm:ss")+" after-send-file  chunkUploadFinish:文件 "+file.name + " server响应："+result.msg);   
                            $('#' + file.id).find('span.state').text("合并文件失败");
                            deferred.reject();
                        }                           
                    }
                });         

            }else{
                deferred.resolve();
            }           

            return deferred.promise();

        }
    });