如何在 AngularJs 中将 <输入文件> 编码为 base64？答案

【问题标题】：How to Encode an <input file> to base64 in AngularJs?如何在 AngularJs 中将 <输入文件> 编码为 base64？
【发布时间】：2013-07-09 13:49:34
【问题描述】：

我需要通过 drupal 服务/文件将图像保存到 Drupal。据我了解，我需要将文件解码为 base64 并将其作为服务/文件的有效负载发送。我怎样才能编码才能做到这一点？？？？我想在 javascript 中执行此操作。

【问题讨论】：

stackoverflow.com/a/17502568/2450730 这可以帮助您，包含文件阅读器、画布调整大小和另存为 png 的完整示例

标签： javascript drupal

【解决方案1】：

我是@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 文件进行解码的示例代码。

【讨论】：

一个非常优雅的扩展，可以通过bower安装。
很棒的插件。喜欢它
很棒的插件！这节省了我的时间！

【解决方案2】：

我知道它已经很老了，但我来这里是为了解决问题。

最后我发现（如果您不想使用外部库）以 base 64 加载图像就像使用 javascript FileReader.readAsDataURL() 一样简单

希望我的最终代码能帮助像我这样的其他初学者。它的特点：

HTML5 输入文件input type='file'（灵感来自this answer）
触发来自其他 html 元素的输入（灵感来自 this answer）
检查浏览器是否支持input type='file'（灵感来自this answer）

它也在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>

【讨论】：

【解决方案3】：

我建议您使用https://github.com/ninjatronic/angular-base64。

按照说明使用该库后，您可以简单地调用：

var imageData=$base64.encode(image);

别忘了注入你的模块：

.module('myApp', ['base64'])

【讨论】：

该库运行良好。我将它与基于 php 的 REST 服务器结合使用。
我怎样才能将这个库与一起使用
@Abdrahmn_msi 我是维护者 - 在 repo 上提出问题以寻求帮助 github.com/ninjatronic/angular-base64/issues
如何从图片文件中获取

【解决方案4】：

你不需要 AngularJs。这里有一个线程解释如何使用 Javascript 和画布：How to convert image into base64 string using javascript

【讨论】：

【解决方案5】：

我找到了一些网站，像chrome这样的浏览器，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

【讨论】：

【解决方案6】：

我遇到了同样的问题并遇到了this repository on github。试了一下，效果很好。

【讨论】：