logo标签列表

如何在AngularJs中将<input file>编码为base64？

javascriptdrupal
15

我需要通过Drupal的服务/文件将图片保存到系统中。据我所知，我需要将文件解码为base64，并将其作为服务/文件的有效载荷进行发送。如何获取编码以完成此操作？ 我希望使用JavaScript实现。

这个链接可以帮助你，其中包含了filereader、canvas调整大小和保存为png的完整示例。 - cocco
6个回答
27

我是angular-base64-upload的作者，正如@GrimurD所提到的那样。这个指令在这种情况下运行得非常完美。它将图像（或其他文件类型）解析成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文件的示例代码。

1
一个非常优雅的扩展，可通过 bower 安装。 - metakermit
很棒的插件。喜欢它。 - Mani
大插件！这救了我的一天！ - Bonch
12
我知道这篇文章已经很老了，但我来这里是为了寻求解决方案。
最终我发现（如果你不想使用外部库）以base64加载图像就像使用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>

8
我建议您使用https://github.com/ninjatronic/angular-base64。在按照该库的使用说明后，您可以简单地调用以下代码：
var imageData=$base64.encode(image);

不要忘记在你的模块中注入：

.module('myApp', ['base64'])
那个库很好用。我将它与基于PHP的REST服务器一起使用。 - RevNoah
3
如何使用此库与<input file>一起使用。 - Abdrahmn_msi
@Abdrahmn_msi 我是维护者 - 在仓库上提出问题以获取帮助 https://github.com/ninjatronic/angular-base64/issues - Pete Martin
1
如何从图像文件中获取数据？ - Georgi Kovachev
0
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接