ng-file-upload与ng-repeat配合异常：多对象文件上传错误

嘿，这个问题我之前帮不少人排查过——本质上是你循环里的文件上传控件没和对应的book对象建立专属绑定，再加上可能控件ID重复，导致所有上传操作都“跑偏”到第一个对象上了！下面给你具体的诊断和解决方案：

问题根源 #

ng-repeat会为每个循环项创建独立的子作用域，但如果你的文件控件：

• 没有绑定到当前book的专属属性上，而是用了全局变量
• 控件的id/name在循环中重复，DOM选择器会默认选中第一个匹配的元素

就会出现你遇到的“非第一个对象的文件全传到第一个”的问题。

分步解决方案 #

1. 给每个Book对象添加专属的文件存储属性 #

在初始化books数组的时候，给每个book加一个uploadedFiles数组，用来存当前对象要上传的文件：

// 控制器里初始化books
$scope.books = [
  { seller_name: "卖家A", id: 1, uploadedFiles: [] },
  { seller_name: "卖家B", id: 2, uploadedFiles: [] },
  { seller_name: "卖家C", id: 3, uploadedFiles: [] }
];

2. 修改HTML中的文件上传控件 #

确保每个控件绑定到当前book的uploadedFiles，并且设置唯一的id（用$index或者book.id都行）：

<tbody ng-repeat="book in books track by book.id">
  <tr>
    <td>
      <div class="row" style="padding: 15px;">
        <div class="col-xs-2 col-sm-2 col-md-2">
          <h4>{{ book.seller_name }}</h4>
        </div>
      </div>
      <div class='row' id="tb-{{book.id}}">
        <!-- 绑定到当前book的uploadedFiles，id唯一 -->
        <input type="file" 
               id="upload-file-{{book.id}}" 
               multiple 
               ng-change="handleFileSelect(book)" />
        
        <!-- 可选：显示当前book已选的文件 -->
        <div class="selected-files" ng-if="book.uploadedFiles.length > 0">
          <p>已选文件：</p>
          <ul>
            <li ng-repeat="file in book.uploadedFiles">{{ file.name }}</li>
          </ul>
        </div>
      </div>
    </td>
  </tr>
</tbody>

3. 编写专属的文件处理逻辑 #

在控制器里写handleFileSelect函数，针对当前传入的book对象处理文件，确保文件和对应book绑定：

$scope.handleFileSelect = function(book) {
  // 获取当前book对应的文件控件
  const fileInput = document.getElementById(`upload-file-${book.id}`);
  const selectedFiles = fileInput.files;

  // 把文件存入当前book的uploadedFiles数组
  for(let i = 0; i < selectedFiles.length; i++) {
    book.uploadedFiles.push(selectedFiles[i]);
  }

  // 这里写你的上传逻辑，比如调用后端接口，把book的id和文件一起传
  // 示例：uploadToServer(book.id, book.uploadedFiles);
};

关键注意点 #

• 一定要用track by（比如track by book.id）确保ng-repeat的每个项有唯一标识，避免作用域混淆
• 绝对不要用全局变量存储文件，必须把文件和当前循环的book对象绑定
• 如果用第三方上传指令（比如ng-file-upload），也要把指令的参数绑定到book.uploadedFiles，而不是全局属性

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