wake-up-neo.com

Wie kann man eine <Eingabedatei> in AngularJs mit base64 kodieren?

Ich muss ein Bild in Drupal über den Drupal-Dienst/die Datei speichern. Für das, was ich verstehe, muss ich die Datei in eine base64 decodieren und diese als Nutzlast für den Dienst/die Datei senden. Wie kann ich das bekommen, um dies zu tun ???? Ich möchte dies in Javascript tun.

javascriptdrupal
14
Poncho1984

Ich bin der Autor von angle-base64-upload wie von @GrimurD erwähnt. Diese Direktive funktioniert perfekt für dieses Szenario. Es analysiert Bilder (oder andere Dateitypen) in base64-Kodierung und hängt die Dateiinformationen an ein Modell in Ihrem Bereich an.

Verwendungsbeispiel:

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

Sobald Sie eine Datei ausgewählt haben, hat yourModel einen Wert wie etwa:

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

Es enthält auch Beispielcode zum Dekodieren der base64-Datei auf Ihrem Server mithilfe von PHP oder Ruby.

26
Adones Pitogo

Ich weiß, es ist ziemlich alt, aber ich bin hergekommen, um eine Lösung zu finden.

Am Ende habe ich herausgefunden, dass (wenn Sie keine externen Bibliotheken verwenden möchten) das Laden eines Bildes in Basis 64 so einfach ist wie die Verwendung von Javascript FileReader.readAsDataURL ()

Hoffentlich hilft mein endgültiger Code anderen Anfängern wie mir. Es verfügt über:

  • Eingabedatei mit HTML5 input type='file' (inspiriert von diese Antwort )
  • Eingabe von anderen HTML-Elementen auslösen (inspiriert von dieser Antwort )
  • Prüfen Sie, ob der Browser input type='file' unterstützt (inspiriert von diese Antwort )

Es ist auch auf 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

Ich würde dir empfehlen, https://github.com/ninjatronic/angular-base64 zu verwenden. 

Nach den folgenden Anweisungen zur Verwendung dieser Bibliothek können Sie einfach anrufen:

var imageData=$base64.encode(image);

Vergiss nicht, in dein Modul zu spritzen:

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

Dafür brauchen Sie keine AngularJs. Es gibt einen Thread, der erklärt, wie dies mit Javascript und Canvas geschieht: Wie konvertiert man ein Bild in eine Base64-Zeichenfolge mit Javascript

0
Reason

Ich hatte das gleiche Problem und stieß auf dieses Repository auf github . Ausprobiert und es hat perfekt funktioniert.

0
grimurd

ich habe einige Websites gefunden, Browser wie Chrome, ie10 .. kann dies unterstützen 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