Estrarre un contenuto di file binario nell'array di byte utilizzando angularjs

Question

Vorrei estrarre i dati binari da un file binario in un array di byte. Sto avendo difficoltà a farlo funzionare correttamente.

Si può vedere il jsFiddle qui: https://jsfiddle.net/alexsuch/6aG4x/

Il codice 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> 

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

ricevo un formato di testo corrotto come mostrato in questo:

Cosa sto facendo di sbagliato è cau cantare il contenuto per essere confuso come questo?

Answer 1

Si dice che si desidera che il contenuto binario del file venga inviato su JSON e memorizzato in mongoDB. Il problema con il tuo codice è che stai leggendo il file come testo, quando dovresti leggerlo come ArrayBuffer, che non applicherà la codifica del testo ai valori binari.

ArrayBuffer è ottimo, ma non tutti i browser supporteranno l'invio di ArrayBuffer su JSON tramite XMLHttpRequest. Soprattutto se si conosce il formato in cui deve essere, potrebbe essere una buona idea convertirlo in un array normale. Fortunatamente, possiamo usare gli array digitati in JavaScript per aiutarlo.

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

violino Aggiornato: https://jsfiddle.net/6aG4x/796/