AngularJS前端如何实现文件上传，是否可通过查询字符串方式完成？

首先明确两个核心要点：

• 你当前使用的application/json请求格式无法传输二进制文件内容，不支持文件上传
• 借助查询字符串实现文件上传的思路不可行，查询字符串仅支持传递少量文本参数，无法承载二进制文件数据
  正确的实现方式是使用FormData对象封装所有表单数据，以multipart/form-data格式提交请求，具体步骤如下：

1. 调整HTML表单模板 #

给表单新增文件上传输入框，预留文件绑定的属性位：

<form name="yourForm" ng-submit="submitForm()">
  <!-- 原有其他表单字段保持不变 -->
  <input type="text" ng-model="formData.name" placeholder="名称">
  <input type="text" ng-model="formData.phone" placeholder="手机号">
  <!-- 新增文件上传字段 -->
  <input type="file" name="uploadFile" file-model="formData.uploadFile">
  <button type="submit">提交表单</button>
</form>

2. 新增自定义指令适配文件绑定 #

原生AngularJS不支持type="file"输入框的双向绑定，需要自定义fileModel指令实现文件数据绑定：

angular.module('yourAppName').directive('fileModel', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      const model = $parse(attrs.fileModel);
      const modelSetter = model.assign;
      element.bind('change', function(){
        scope.$apply(function(){
          modelSetter(scope, element[0].files[0]);
        });
      });
    }
  };
}]);

3. 调整提交请求逻辑 #

替换原有JSON提交逻辑，使用FormData封装所有字段，注意必须修改jQuery ajax的默认配置：

$scope.submitForm = function () {
  // 初始化FormData对象
  const postData = new FormData();
  // 批量追加所有表单字段（包含文本字段和文件字段）
  Object.keys($scope.formData).forEach(key => {
    postData.append(key, $scope.formData[key]);
  });

  let settings = {
    "url": "https://someurl",
    "method": "POST",
    "timeout": 0,
    // 必须新增以下两个配置，禁止jQuery默认处理数据和请求头
    processData: false,
    contentType: false,
    "data": postData
  };
  
  $.ajax(settings).done(function (response) {
      toastr["success"]("表单提交成功", "提交成功!");
      setTimeout(function () {
        window.location.href = "success.php";
      }, 1500);
    }).fail(function (err) {
        toastr["error"]("表单提交失败，请重试", "提交失败!");
    }
};

后端适配说明 #

后端需要调整请求解析逻辑，不再按原有的JSON payload格式解析，改为按multipart/form-data格式解析：文件会被封装到请求的文件域中，其他文本参数的获取方式和普通表单提交一致。

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