Extrahieren Sie einen Binärdatei Inhalt in Byte-Array mit angularjs

Question

Ich möchte Binärdaten aus einer Binärdatei in ein Byte-Array extrahieren. Ich habe Schwierigkeiten, es richtig zu funktionieren.

können Sie die jsFiddle sehen hier: https://jsfiddle.net/alexsuch/6aG4x/

Die 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> 

Der Javascript-Code:

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]); 
      }); 
     } 
    }; 
}); 

ich ein beschädigtes Text-Format erhalten, wie in dieser gezeigt:

Was mache ich falsch das ist cau Singen Sie den Inhalt so verstümmelt?

Answer 1

Sie möchten den binären Inhalt der Datei über JSON senden und in mongoDB speichern. Das Problem mit Ihrem Code ist, dass Sie die Datei als Text lesen, wenn Sie es als ArrayBuffer lesen sollten, die Textcodierung nicht auf die Binärwerte anwenden wird.

ArrayBuffer ist großartig, aber nicht alle Browser unterstützen das Senden ArrayBuffer über JSON über XMLHttpRequest. Besonders wenn Sie das Format kennen, in dem es sich befindet, ist es eine gute Idee, es in ein reguläres Array zu konvertieren. Zum Glück können wir dafür typisierte Arrays in JavaScript verwenden.

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]); 
      }); 
     } 
    }; 
}); 

Aktualisiert Geige: https://jsfiddle.net/6aG4x/796/