AngularJS中如何从$scope.WaiveFormData移除已追加的文件项

这个问题的核心在于FormData对象本身的局限性——它没有提供直接删除指定键值对的方法，而且你之前依赖input的files集合来追加文件，但input的files是只读的，没法直接修改。解决思路是维护一个独立的文件数组来跟踪已选文件，再基于这个数组同步更新FormData，这样删除操作就变得简单了。

具体实现步骤 #

1. 初始化跟踪已选文件的数组 #

首先在控制器里添加一个数组，用来存储所有已选择的文件，后续的新增、删除操作都基于这个数组：

$scope.selectedFiles = [];
// 初始化FormData（如果之前没初始化的话）
$scope.WaiveFormData = new FormData();

2. 修改文件选择的处理函数 #

不再直接操作FormData，而是把选中的文件添加到selectedFiles数组，然后同步更新FormData：

$scope.getTheFiles = function($files) {
  // 将新增的文件批量添加到跟踪数组
  Array.prototype.push.apply($scope.selectedFiles, $files);
  // 同步更新FormData
  $scope.updateWaiveFormData();
};

3. 实现FormData同步函数 #

这个函数负责根据selectedFiles数组重新构建FormData，确保两者完全同步：

$scope.updateWaiveFormData = function() {
  // 先备份FormData中的非文件字段（如果有的话）
  const otherFields = {};
  for (const pair of $scope.WaiveFormData.entries()) {
    // 假设文件字段都是以"Attachement"开头，跳过这些字段
    if (!pair[0].startsWith('Attachement')) {
      otherFields[pair[0]] = pair[1];
    }
  }

  // 清空原FormData并重新构建
  $scope.WaiveFormData = new FormData();

  // 先把非文件字段加回去
  Object.keys(otherFields).forEach(key => {
    $scope.WaiveFormData.append(key, otherFields[key]);
  });

  // 遍历跟踪数组，添加文件到FormData
  $scope.selectedFiles.forEach((file, index) => {
    $scope.WaiveFormData.append(`Attachement${index}`, file);
  });
};

4. 实现删除文件的函数 #

当用户删除已选文件时，从selectedFiles数组中移除对应项，再调用同步函数更新FormData：

$scope.removeFile = function(fileIndex) {
  // 从跟踪数组中移除指定索引的文件
  $scope.selectedFiles.splice(fileIndex, 1);
  // 同步更新FormData
  $scope.updateWaiveFormData();
};

5. 在HTML中添加文件列表和删除按钮 #

把已选文件列表渲染出来，并给每个文件绑定删除事件：

<!-- 已选文件列表 -->
<div class="selected-files" ng-repeat="file in selectedFiles track by $index">
  <span>{{file.name}} ({{(file.size / 1024 / 1024).toFixed(2)}}MB)</span>
  <button ng-click="removeFile($index)" class="delete-btn">删除</button>
</div>

<!-- 原文件上传控件 -->
<input type="file" class="md-input dropify" id="inputs" multiple required ng-model="gFiles" ngf-multiple="true" ng-files="getTheFiles($files)"/>

为什么这个方案可行？ #

• selectedFiles数组是可修改的，我们可以通过splice轻松移除指定文件
• 每次修改数组后重新构建FormData，确保WaiveFormData和已选文件完全同步
• 备份并还原非文件字段，避免丢失其他表单数据

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