web-dev-qa-db-fra.com

Comment encoder un <fichier d'entrée> en base64 dans AngularJs?

Je dois enregistrer une image dans Drupal, via le service/fichier Drupal. Pour ce que je comprends, je dois décoder le fichier en base64 et l’envoyer en tant que charge utile pour le service/fichier. Comment puis-je arriver à encoder le afin de le faire ???? Je veux le faire en javascript.

javascriptdrupal
14
Poncho1984

Je suis l'auteur de angular-base64-upload comme mentionné par @GrimurD. Cette directive fonctionne parfaitement pour ce scénario. Il analyse l'image (ou tout autre type de fichier) en encodage en base64 et attache les informations sur le fichier à un modèle de votre portée.

Exemple d'utilisation:

<input type='file' ng-model='yourModel' base-sixty-four-input>

Une fois que vous avez sélectionné un fichier, yourModel aura la valeur suivante:

{
  "filetype": "text/plain",
  "filename": "textfile.txt",
  "base64": "/asdjfo4sa]f57as]fd42sdf354asdf2as35fd4"
}

Il contient également un exemple de code permettant de décoder le fichier base64 de votre serveur, à l'aide de PHP ou de Ruby.

26
Adones Pitogo

Je sais que c'est assez vieux, mais je suis venu ici pour une solution.

Finalement, j'ai découvert que (si vous ne voulez pas utiliser de bibliothèques externes), charger une image en base 64 est aussi simple que d'utiliser javascript FileReader.readAsDataURL ()

Espérons que mon code final aidera les débutants comme moi. Il comporte:

  • Fichier d'entrée avec HTML5 input type='file' (inspiré par cette réponse )
  • Déclencher une entrée à partir d'autres éléments HTML (inspiré par cette réponse )
  • Vérifiez si le navigateur prend en charge input type='file' (inspiré par cette réponse )

C'est aussi sur codepen

angular.module('starter', [])
  .controller('Ctrl', function($scope) {
    $scope.data = {}; //init variable
    $scope.click = function() { //default function, to be override if browser supports input type='file'
      $scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
    }

    var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
    fileSelect.type = 'file';

    if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
      return;
    }

    $scope.click = function() { //activate function to begin input file on click
      fileSelect.click();
    }

    fileSelect.onchange = function() { //set callback to action after choosing file
      var f = fileSelect.files[0],
        r = new FileReader();

      r.onloadend = function(e) { //callback after files finish loading
        $scope.data.b64 = e.target.result;
        $scope.$apply();
        console.log($scope.data.b64.replace(/^data:image\/(png|jpg);base64,/, "")); //replace regex if you want to rip off the base 64 "header"

        //here you can send data over your server as desired
      }

      r.readAsDataURL(f); //once defined all callbacks, begin reading the file

    };


  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app='starter' ng-controller='Ctrl'>
  <button ng-click='click()'>click to select and get base64</button>
  <br>BASE 64 data:
  <br>
  <span style='color: red'>{{data.alert}}</span>
  <div style='Word-wrap:break-Word'>
    {{data.b64}}
  </div>
</body>

10
Karlooie

Je vous recommanderais d'utiliser https://github.com/ninjatronic/angular-base64 . 

Après avoir suivi les instructions d'utilisation de cette bibliothèque, vous pouvez simplement appeler:

var imageData=$base64.encode(image);

N'oubliez pas d'injecter dans votre module:

.module('myApp', ['base64'])
8
Bipin Bhandari

Vous n'avez pas besoin d'AngularJs pour cela. Il y a un fil ici expliquant comment faire en utilisant Javascript et canvas: Comment convertir une image en chaîne base64 en utilisant javascript

0
Reason

J'avais le même problème et j'ai rencontré ce dépôt sur github . Essayé et cela a fonctionné parfaitement.

0
grimurd

j'ai trouvé des sites Web, un navigateur comme chrome, c.-à-d .10..peut être compatible avec cela .__ https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug= DOM% 2FFileReader }

_ { http://www.pjhome.net/web/html5/encodeDataUrl.htm } _

0
cui peng