【问题标题】：How to upload multiple files in angular js and convert it into base 64如何在angular js中上传多个文件并将其转换为base 64
【发布时间】：2018-09-30 03:01:21
【问题描述】：

我使用单个文件上传并将其转换为工作正常的 base 64。我正在尝试上传多个文件并将每个文件转换为 base 64，其中我使用了以下指令。发生的情况是所有图像转换为单个基数 64 我想将每个图像文件转换为 base 64.so 任何人都可以帮助我如何实现它。

指令：

"use strict";
(function() {
angular.module("SS.pages").directive("fileModel", fileModel);

/** @ngInject */
function fileModel($parse, $q) {
 return {
  restrict: "A",
  link: function(scope, element, attrs) {
    var model = $parse(attrs.fileModel),
      modelSetter = model.assign;
    element.bind("change", function() {
      var files = [];
      angular.forEach(element[0].files,function(file) {
        files.push(file);
      });
      scope.$apply(function() {
        // var file = element[0].files[0];
        angular.forEach(files, function(file) {
          getFileBuffer(file).then(function(resp) {
            modelSetter(scope, resp);
          });
        });
      });
    });
  }
};
function getFileBuffer(file) {
  var deferred = new $q.defer();
  var reader = new FileReader();
  reader.onloadend = function(e) {
    deferred.resolve(e.target.result);
  };
  reader.onerror = function(e) {
    deferred.reject(e.target.error);
  };
  reader.readAsDataURL(file);
  return deferred.promise;
}
}

})();

HTML：

<div class="form-group">
      <label translate>.NEW.UPLOAD</label>
      <input type="file" class="form-control" name="schemeupload" accept="image/jpeg,application/jpeg" file-model="vm.schemeApply.document" multiple/>
      <p class="help-block" translate>.NEW.UPLOADMESSAGE</p>
      <span class="help-block error-block basic-block" translate>.NEW.REQUIRED</span>
    </div>

【问题讨论】：

直接上传文件会更明智。将它们转换为 base64 会增加 33% 的额外开销。

标签： angularjs file-upload

【解决方案1】：

直接上传文件会更明智。将它们转换为 base64 会增加 33% 的额外开销

app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

用法

<input type="file" files-input ng-model="filesArray" 
       ng-change="uploadMultiple(filesArray)" multiple />

$scope.uploadMultiple = function(filesArray) {
     var config = { headers: {'Content-Type': undefined} };
     var promises = filesArray.map(function (file) {
         return $http.post(url, file, config);
     });
     $q.all(promises)
       .then(function(responseArray) {
         console.log("All files uploaded");
     }).catch(function(error) {
         console.log("ERROR", error);
     });
};

已知将大文件转换为 base64 会导致问题。见，FileReader readAsDataURL() method not read large pdf file 24 MB。

【讨论】：