web-dev-qa-db-ja.com

AngularJsで<input file>をbase64にエンコードする方法は？

drupal service/fileを使用して、Drupalに画像を保存する必要があります。理解できるように、ファイルをbase64にデコードし、これをサービス/ファイルのペイロードとして送信する必要があります。これを行うにはどうすればエンコードできますか???? JavaScriptでこれを行いたいです。

javascriptdrupal
15
Poncho1984

私は--GrimurDが言及した angular-base64-upload の著者です。このディレクティブは、このシナリオに最適です。イメージ（またはその他のファイルタイプ）をbase64エンコードに解析し、ファイル情報をスコープ内のモデルに添付します。

サンプル使用法：

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

ファイルを選択すると、yourModelは次のような値になります。

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

また、PHPまたはRubyを使用して、サーバーでbase64ファイルをデコードするためのサンプルコードもあります。

27
Adones Pitogo

私はそれがかなり古いことを知っていますが、解決策のためにここに来ました。

最終的に、（外部ライブラリを使用したくない場合）base 64にイメージをロードすることは、javascript FileReader.readAsDataURL（） を使用するのと同じくらい簡単であることがわかりました。

私の最終コードが私のような他の初心者に役立つことを願っています。機能：

  • HTML5を使用した入力ファイルinput type='file'（ この回答 に触発された）
  • 他のhtml要素からの入力をトリガーします（ この回答 に触発された）
  • ブラウザがinput type='file'（ この回答 に触発された）

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>
11
Karlooie

https://github.com/ninjatronic/angular-base64 を使用することをお勧めします。

このライブラリを使用するための指示に従って、次を呼び出すことができます。

var imageData=$base64.encode(image);

モジュールに挿入することを忘れないでください：

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

そのためにAngularJsは必要ありません。 Javascriptとキャンバスを使用してそれを行う方法を説明するスレッドがあります： javascriptを使用してbase64文字列に画像を変換する方法

0
Reason

私は同じ問題を抱えていて、 githubのこのリポジトリ に遭遇しました。それを試してみたところ、完璧に機能しました。

0
grimurd

私はいくつかのウェブサイトを見つけました、クロムのようなブラウザ、ie10 ..はこれをサポートするかもしれません 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