求助：AngularJS实现多文件上传并分别转换为Base64的方法

嘿，我懂你现在的头疼点——单文件转Base64跑的顺顺当当，一搞多文件就全部揉成一个Base64串了对吧？别慌，咱们只要调整指令里的文件处理逻辑，让每个文件都单独走一遍转换流程就行。

首先猜一下你原来的指令问题：大概率是没遍历选中的文件列表，直接把所有文件塞进同一个FileReader里，或者没给每个文件单独分配转换逻辑。下面是修正后的完整指令代码，你可以直接参考：

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

  /** @ngInject */
  function fileModel($parse) {
    return {
      restrict: "A",
      link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        // 监听文件选择变化事件
        element.bind("change", function() {
          var files = element[0].files;
          var base64Results = [];

          // 遍历每个选中的文件，单独处理
          angular.forEach(files, function(file) {
            var reader = new FileReader();

            reader.onload = function(e) {
              // 将当前文件的Base64结果存入数组
              base64Results.push(e.target.result);
              // 所有文件处理完成后，把数组绑定到scope模型上
              if (base64Results.length === files.length) {
                scope.$apply(function() {
                  modelSetter(scope, base64Results);
                });
              }
            };

            // 读取当前文件为DataURL（即Base64格式）
            reader.readAsDataURL(file);
          });
        });
      }
    };
  }
})();

关键修改点说明： #

• 拿到选中的文件列表element[0].files后，用angular.forEach遍历每个文件，给每个文件单独创建FileReader实例，避免文件间的逻辑干扰
• 每个文件的转换结果单独存入base64Results数组，等所有文件都处理完成后，再把整个数组赋值给绑定的模型
• 用scope.$apply确保Angular能检测到模型变化，同步更新视图

接下来你可以在HTML里这样使用这个指令：

<input type="file" multiple file-model="uploadedFilesBase64">

对应的控制器里，$scope.uploadedFilesBase64就是一个包含所有文件Base64字符串的数组，每个元素对应一个上传的文件，完美实现你要的“每个文件单独转Base64”的需求啦！

内容的提问来源于stack exchange，提问作者Nidhin Kumar