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

标签 javascript html google-chrome filereader

我试图通过迭代切片并在使用 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 中间歇性失败。

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

更精致的 fiddle 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>

我错过了什么?

最佳答案

您应该使用 event.target.result 代替 currentTarget 它可能会解决您的问题,

关于Chrome 中的 Javascript FileReader.onload event.currentTarget.result.byteLength = 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28911017/

相关文章:

javascript - 如何从文本中删除空格、标点符号和符号

javascript - CSS 相对定位

javascript - Chrome 未检测到全屏更改

javascript - Chrome 中的 PPB_Graphics2D.PaintImageData : Rectangle is outside bounds. 错误是什么?

javascript - data.loading 为 false 时立即响应 : How can I call a method only once in the lifecycle of a component,

javascript - 如何使用 Symfony2 中的警报消息通过 javascript 显示 html twig 表单字段值?

javascript - 使用 .pipe() 时出现 node.js fs.createReadStream 错误

javascript - 从网页打开 android 应用程序

html - 在 Chrome 中下载文件时,我的容器会向上移动到标题中。不确定如何解决

javascript - 使用Excel-VBA登录网站