AngularJS表格行多图上传异常：所有行同步显示上传图片

你遇到的问题很典型——所有行都共享了同一个全局的files数组，而且上传事件是全局广播的，所以不管哪一行上传图片，所有行都会同步显示这些图片。下面是具体的解决方案：

核心问题分析 #

• 你当前的代码里，所有行的图片列表都绑定到了全局的$scope.files数组，任何一行上传的图片都会被添加到这个数组中，导致所有行都显示相同的内容。
• 上传指令使用$emit向上发送事件，全局的控制器监听这个事件并往全局数组里加数据，这就造成了数据共享的问题。

解决方案：为每行维护独立的图片数据 #

我们需要让表格的每一行都拥有自己的图片数组，而不是共用全局数据。可以通过把表格数据重构为数组对象，配合修改指令来实现：

修改后的HTML代码

<table style="width:50%" border="1">
  <tr>
    <th align="center">First</th>
    <th align="center">Last</th>
    <th align="center">Age</th>
    <th align="center">photo</th>
  </tr>
  <!-- 用ng-repeat渲染表格行，每行对应一个person对象 -->
  <tr ng-repeat="person in people">
    <td>{{person.first}}</td>
    <td>{{person.last}}</td>
    <td>{{person.age}}</td>
    <td>
      <!-- 把当前行的person对象传给指令，指定图片要存入的数组 -->
      <input type="file" multiple file-upload="person" />
    </td>
    <td align="right">
      <!-- 遍历当前行person专属的files数组 -->
      <div ng-repeat="step in person.files">
        <img ng-src="{{step.src}}" class="thumbnail" height="50px" />
      </div>
    </td>
  </tr>
</table>

修改后的AngularJS代码

// 初始化表格数据，每个person都有自己的files数组来存图片
$scope.people = [
  {first: 'Jill', last: 'Smith', age: 50, files: []},
  {first: 'aa', last: 'aa', age: 50, files: []},
  {first: 'bb', last: 'bb', age: 50, files: []},
  {first: 'cc', last: 'cc', age: 50, files: []}
];

// 重写fileUpload指令，直接操作当前行的图片数组
abapp.directive('fileUpload', function () {
  return {
    scope: {
      // 通过双向绑定接收当前行的person对象
      fileUpload: '='
    },
    link: function (scope, el, attrs) {
      el.bind('change', function (event) {
        var files = event.target.files;
        // 遍历选中的文件
        for (var i = 0; i < files.length; i++) {
          var imageItem = {file: files[i]};
          // 把图片项添加到当前行person的files数组
          scope.fileUpload.files.push(imageItem);
          
          // 读取图片并生成预览地址
          var reader = new FileReader();
          reader.addEventListener("load", function (e) {
            scope.$apply(function () {
              imageItem.src = e.target.result;
            });
          }, false);
          
          if (imageItem.file) {
            reader.readAsDataURL(imageItem.file);
          }
        }
      });
    }
  };
});

修改说明 #

1. 数据结构重构：把原来静态的表格行改成用ng-repeat渲染，基于$scope.people数组，每个元素包含个人信息和专属的files数组，确保每行数据独立。
2. 指令优化：修改fileUpload指令，通过作用域绑定接收当前行的person对象，上传图片时直接将图片添加到该对象的files数组中，不再使用全局事件广播，从根源上避免了数据共享。
3. 图片列表绑定：每行的图片预览现在遍历的是当前行person.files数组，只会显示该行上传的图片，彻底解决了同步显示的问题。

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