Question

我要在客户端设置多文件上传。下面是我需要完成的步骤：

用户将一次上传多个文件。例如：一次5个文件。
每个文件大小各不相同，且文件较大。例如：File1.size = 800mb
将大文件切成块。例如：chunk_size = 50mb
每个块都将发送到后端并从中获得响应。

我可以对单个文件上传执行此操作，例如拼接大文件块。但是一次对多个文件上传则无法执行。

下面是我尝试的代码：

var that = this;
var files = that.files || [];
var url = that.config.url;
var fileKeyUpload = that.config.fileKeyUpload;
for(var i=0; i < files.length; i++) {  //multiple files loop
    var start = 0;    //chunk start as 0
    var bytes_per_chunk = 52428800; // 50 MB  per chunk
    var blob = files[i];
    var size = blob.size;
    var end = bytes_per_chunk;
    var getStatus = function() {
        var nextChunk = start + bytes_per_chunk;
        var percentage = nextChunk > size ? 100 : Math.round((start / size) * 100); // calculating percentage
        uploadFile(blob.slice(start, end), files[key], start, percentage).then(function() {
            if(start < size && bytes_per_chunk < size){
                start = end;
                end = start + bytes_per_chunk;
                start < size ? getStatus() : null;
            }
        });
    }
    return getStatus();
}

function uploadFile(blob, file, offset, completedPrecentile) {
    return new Promise(function(resolve) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url);
        xhr.setRequestHeader("Accept", "*/*");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if(that.config.hasOwnProperty("onFileUploadComplete")){
                    that.config.onFileUploadComplete(xhr, true, completedPrecentile, file);
                    resolve();
                }
            }
        };
        xhr.send(blob);
    });
};

这是我尝试过的方法，它适用于单个文件，有关如何通过将大文件切成块的方式实现多文件上传的任何帮助。

由于使用了本地api，因此无法发布工作演示。

多文件上传为大块

0 个答案: