Question

我试图通过迭代切片并在使用FileReader读取切片后重新创建切片中的blob来读取javascript Blob。在最新的Chrome中，间歇性地导致

event.currentTarget.result.byteLength = 0

或

“在处理操作时找不到请求的文件或目录。”

这个过程是

1）制作一个1 MB的blob。

2）使用FileReader.onload的回调逐个切片，以1024字节为增量。

3）通过FileReader读取每个切片并创建一个新的Blob并保存。

4）重复步骤2并创建一个由当前读取和前一个读取组成的新Blob。

5）如果一切顺利，我们将获得与原始Blob相同的Blob。

这在Chrome中间歇性地失败。

这是一个小提琴http://jsfiddle.net/jimlowrey/8koxyoft/。务必打开控制台查看器。

更精细的小提琴http://jsfiddle.net/jimlowrey/d2dL8phh/

<html>
<body>
Blob Test
<script>

    var end = 0, i = 0, size, newBlob = new Blob(), partBlob;

    var readSlice = function(event){
        var bytesRead = event.currentTarget.result.byteLength;
        if ( bytesRead > 0){
            newBlob = new Blob([newBlob, event.currentTarget.result]);
        }else{
            log("Zero bytes read" , event);
            return;
        }
        i = i + 1024;
        //i = i + bytesRead;
        end = i + 1024;
        if ( end > bigBlob.size ) {
            end = bigBlob.size;
        }
        if ( i < bigBlob.size){
            log("i:"+i + " end:" + end);
            read(bigBlob, i, end);
        }else{
            log(newBlob);
            log(bigBlob);
            newBlob = null;
            bigBlob = null;
        }
    };
    function read(blob, start, end){
        partBlob = blob.slice(start, end);
        log("sliced " + start + ":"+ end+", partBlob size: " + partBlob.size);
        var reader = new FileReader();
        reader.onerror = error;
        reader.onabort = onabort;
        reader.onload = readSlice;
        reader.readAsArrayBuffer(partBlob);
    };
    function error(e){
        log("error " , e);
        log("i:" + i + " end:" + end);
    };
    function onabort(e){
        log("aborted", e);
        error(e);
    };

    function buildBlob(kb){
        var uintKbArr = new Uint8Array(1024);
        for(var i=0;i<uintKbArr.length;i++){
            uintKbArr[i]=i%256;
        }
        var blobArray = [];
        for(var i=0;i<kb;i++){
            var b = new Blob([uintKbArr]);//adds a MB each time
            blobArray.push(b);
        }
        bigBlob = new Blob(blobArray);
        return bigBlob;
    }

    function log(m, o){
        if ( o ){
            console.log(m,o);
        }else{
            console.log(m);
        }

    }
    var bigBlob = buildBlob(1024);
    size = bigBlob.size;
    log("Blob size " + size);
    read(bigBlob, 0, 1024);

</script>
</body>
</html>

我错过了什么？

Answer 1

您应该使用event.target.result代替currentTarget来解决您的问题，

Chrome中的Javascript FileReader.onload event.currentTarget.result.byteLength = 0

1 个答案: