AngularJS中使用指令上传文件时如何携带文件内容？

嘿，我看你现在的ngFileModel指令只能拿到文件的基础信息（比如文件名、类型），但没把文件实际内容读出来对吧？这就是为啥能上传文件元数据却传不了内容的核心原因。咱们给指令加个文件内容读取的逻辑，用浏览器原生的FileReader API就能搞定！

第一步：更新你的ngFileModel指令 #

把原来的指令改成下面这样，它会在用户选中文件后自动读取文件内容，把文件信息和内容一起绑定到你的模型里：

form.directive('ngFileModel', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var model = $parse(attrs.ngFileModel);
      var isMultiple = attrs.multiple;
      var modelSetter = model.assign;

      element.bind('change', function () {
        var values = [];
        var totalFiles = element[0].files.length;
        var loadedCount = 0;

        angular.forEach(element[0].files, function (item) {
          // 创建FileReader实例读取文件内容
          var reader = new FileReader();
          
          reader.onload = function(e) {
            loadedCount++;
            // 把文件基础信息和内容打包成对象
            var fileWithContent = {
              name: item.name,
              type: item.type,
              size: item.size,
              content: e.target.result // 这里就是文件内容（base64格式）
            };
            values.push(fileWithContent);

            // 所有文件读取完成后，再更新Angular模型（避免异步问题）
            if (loadedCount === totalFiles) {
              scope.$apply(function () {
                isMultiple ? modelSetter(scope, values) : modelSetter(scope, values[0]);
              });
            }
          };

          // 以base64格式读取文件（适合文本、图片、文档等绝大多数类型）
          // 如果是纯文本文件，也可以换成 reader.readAsText(item);
          reader.readAsDataURL(item);
        });
      });
    }
  };
}]);

第二步：在模板和控制器中使用 #

模板部分： #

<form ng-submit="uploadFile()">
  <!-- 单文件上传 -->
  <input type="file" ng-file-model="selectedFile" />
  <!-- 多文件上传的话加multiple属性：<input type="file" multiple ng-file-model="selectedFiles" /> -->
  <button type="submit">上传文件</button>
</form>

控制器部分： #

app.controller('UploadCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.uploadFile = function() {
    // 单文件取$scope.selectedFile，多文件取$scope.selectedFiles
    var targetFile = $scope.selectedFile;
    if (!targetFile) return;

    // 准备要发送给后端的数据，把文件内容一起带上
    var uploadPayload = {
      fileName: targetFile.name,
      fileType: targetFile.type,
      fileContent: targetFile.content // 这里就是你需要的文件内容啦
    };

    // 发送POST请求到后端接口
    $http.post('/your-upload-api', uploadPayload)
      .then(function(res) {
        console.log('上传成功！', res);
      })
      .catch(function(err) {
        console.error('上传失败', err);
      });
  };
}]);

几个实用注意点 #

• 异步处理：FileReader是异步操作，一定要等所有文件都读取完成后再更新Angular模型，不然会出现模型数据不完整的问题。
• 内容格式：用readAsDataURL会把文件转成base64字符串，后端可以直接解码还原文件；如果是纯文本文件，用readAsText更高效。
• 大文件场景：如果上传几百MB的大文件，base64会让数据体积膨胀30%左右，这种情况建议直接用FormData传原生文件对象（后端也要对应调整接收逻辑），但如果业务必须传文件内容，base64是稳妥的选择。

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