Извлечь содержимое двоичного файла в массив байтов с помощью angularjs

Question

Я хотел бы извлечь двоичные данные из двоичного файла в массив байтов. У меня с трудом получается, чтобы он работал правильно.

Вы можете увидеть jsFiddle здесь: https://jsfiddle.net/alexsuch/6aG4x/

В HTML:

<div ng-controller="MainCtrl" class="container"> 
    <h1>Select text file</h1> 
    <input type="file" on-read-file="showContent($fileContent)" /> 
    <div ng-if="content"> 
     <h2>File content is:</h2> 
     <pre>{{ content }}</pre> 
    </div> 
</div> 

Javascript код:

var myapp = angular.module('myapp', []); 

myapp.controller('MainCtrl', function ($scope) { 
    $scope.showContent = function($fileContent) { 
     $scope.content = $fileContent; 
    }; 
}); 

myapp.directive('onReadFile', function ($parse) { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function(scope, element, attrs) { 
      var fn = $parse(attrs.onReadFile); 

      element.on('change', function(onChangeEvent) { 
       var reader = new FileReader(); 

       reader.onload = function(onLoadEvent) { 
        scope.$apply(function() { 
         fn(scope, {$fileContent:onLoadEvent.target.result}); 
        }); 
       }; 

       reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 
      }); 
     } 
    }; 
}); 

я поврежденную формат текста, как показано в следующем:

Что я делаю неправильно, это cau петь контент, который нужно исказить?

Answer 1

Вы говорите, что хотите, чтобы бинарный контент файла отправлялся через JSON и хранился в mongoDB. Проблема с вашим кодом заключается в том, что вы читаете файл как текст, когда вы должны читать его как ArrayBuffer, который не будет применять текстовую кодировку к двоичным значениям.

ArrayBuffer Отлично, но не все браузеры будут поддерживать отправку ArrayBuffer через JSON через XMLHttpRequest. Особенно, если вы знаете формат, в котором он должен быть, может быть хорошей идеей преобразовать его в обычный массив. К счастью, мы можем использовать типизированные массивы в JavaScript, чтобы помочь в этом.

var myapp = angular.module('myapp', []); 

myapp.controller('MainCtrl', function ($scope) { 
    $scope.showContent = function($fileContent) { 
     $scope.content = $fileContent; 
    }; 
}); 

myapp.directive('onReadFile', function ($parse) { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function(scope, element, attrs) { 
      var fn = $parse(attrs.onReadFile); 

      element.on('change', function(onChangeEvent) { 
       var reader = new FileReader(); 

       reader.onload = function(onLoadEvent) { 
        var buffer = onLoadEvent.target.result; 
        var uint8 = new Uint8Array(buffer); // Assuming the binary format should be read in unsigned 8-byte chunks 
        // If you're on ES6 or polyfilling 
        // var result = Array.from(uint8); 
        // Otherwise, good old loop 
        var result = []; 
        for (var i = 0; i < uint8.length; i++) { 
         result.push(uint8[i]); 
        } 

        // Result is an array of numbers, each number representing one byte (from 0-255) 
        // On your backend, you can construct a buffer from an array of integers with the same uint8 format 
        scope.$apply(function() { 
         fn(scope, { 
          $fileContent: result 
         }); 
        }); 
       }; 

       reader.readAsArrayBuffer((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 
      }); 
     } 
    }; 
}); 

Обновлено скрипку: https://jsfiddle.net/6aG4x/796/