javascript - 在上传循环期间获取字节位置

Question

我正在开发一个函数，该函数将使用第 3 方 API 将数据分块写入远程服务器。通过 Stack Overflow 上的一些帮助，我能够完成此任务，现在它正在按预期工作。问题是我只能写入一个 16kb 的 block ，因为我需要提前写入下一个字节的位置的 pos。

初始写入很容易从 0 开始。由于我对此不熟悉，我不确定下一个 pos 应该只是 16 还是什么。如果有帮助，API 调用 writeFileChunk() 需要 3 个参数，文件路径 (str)、pos (int64) 和数据(base64 编码字符串)。

    reader.onload = function(evt)
    {
        // Get SERVER_ID from URL
        var server_id = getUrlParameter('id');

        $("#upload_status").text('Uploading File...');
        $("#upload_progress").progressbar('value', 0);

        var chunkSize = 16<<10;
        var buffer = evt.target.result;
        var fileSize = buffer.byteLength;
        var segments = Math.ceil(fileSize / chunkSize); // How many segments do we need to divide into for upload
        var count = 0;

        // start the file upload
        (function upload()
        {
            var segSize = Math.min(chunkSize, fileSize - count * chunkSize);

            if (segSize > 0)
            {
                $("#upload_progress").progressbar('value', (count / segments));

                var chunk = new Uint8Array(buffer, count++ * chunkSize, segSize); // get a chunk
                var chunkEncoded = btoa(String.fromCharCode.apply(null, chunk));

                // Send Chunk data to server
                $.ajax({
                    type: "POST",
                    url: "filemanagerHandler.php",
                    data: { 'action': 'writeFileChunk', 'server_id': server_id, 'filepath': filepath, 'pos': 0, 'chunk': chunkEncoded },
                    dataType: 'json',
                    success: function(data)
                    {
                        console.log(data);
                        setTimeout(upload, 100);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown)
                    {
                        alert("Status: " + textStatus); alert("Error: " + errorThrown); alert("Message: " + XMLHttpRequest.responseText);
                    }
                });
            }
            else
            {
                $("#upload_status").text('Finished!');
                $("#upload_progress").progressbar('value', 100);

                getDirectoryListing(curDirectory);
            }
        })()
    };

Answer 1

文件在客户端的当前位置将由这一行表示，或者更具体地说是预增量步骤中的第二个参数:

var chunk = new Uint8Array(buffer, count++ * chunkSize, segSize);

不过，在这种情况下，它会在您重新使用它之前前进 (count++)，因此如果您需要实际位置(下面是 pos)，您可以通过简单地提取它将该行重写为:

var pos = count++ * chunkSize;   // here chunkSize = 16kb
var chunk = new Uint8Array(buffer, pos, segSize);

这里每个位置更新将增加 16kb，因为这是 block 大小。对于进度，则计算 pos/fileSize * 100。这当然假设使用未编码的缓冲区大小。

唯一的特殊情况是最后一个 block ，但是当没有更多 block 可供读取时，位置应该等于文件长度 (fileSize)，所以它应该非常简单。

当 ajax 调用返回时，服务器应该有相同的位置，除非出现错误(连接、写访问更改、磁盘已满等)。