javascript - Angular 2 - 在数组中上传文件

Question

我在尝试在数组中使用 uploader 时遇到问题:

我使用“ng-repeat”在表中列出了一组用户。我想添加一个带有按钮的列，为每个按钮上传图像。我目前使用ng2-file-upload，但将其更改为其他版本没有问题。

<table>
  <thead>
    <th>User Id</th>
    <th>User Name</th>
    <th>View / Upload photo</th>
  </thead>
  <tbody>
    <tr *ngFor="let user of users; let i = index" [attr.data-index]="i">
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>
        <div *ngIf="user.photo">
          <a href="{{user.photo}}>View photo</a>
        </div>
        <div *ngIf="!user.photo">
          <input class="btn" type="file" ng2FileSelect [uploader]="uploader"/>
        </div>
      </td>
      <td>
    </tr>
  </tbody>
</table>

在组件中，我知道我需要使用我的 api 的 URL 来声明上传程序，以便使用以下代码上传文件:

uploader: FileUploader = new FileUploader({url: URL});
this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
  this.photo = JSON.parse(response).path;
};

但是此代码并不适用于每个用户。

问题是我无法找到从每个用户那里获取上传的文件路径并将其保存在一个变量中的方法，该变量可以让我将其保存到数据库中。

我知道有一个函数可以获取文件名，但我无法获取每个用户照片的值。

你们有人做过这样的事吗？也许你可以告诉我如何让它发挥作用。

我想我必须为每个用户动态创建 uploader ，因此每个 uploader 都有自己的文件路径，但我怎样才能完成它？或者也许只有一个上传者是可以的，但当我在 onCompleteItem 函数中时我需要获取用户 ID，以便我可以将文件路径保存到数据库中的当前用户？

感谢您的指导。

Answer 1

我在这里能想到的唯一解决方法是，如果您监听输入上的 onChange 事件并传递关联的用户:

<input class="btn" type="file" 
       (change)="selectedUserPhoto($event, user)" 
       ng2FileSelect [uploader]="uploader"/>

然后在事件处理程序中，您可以将文件名保存在用户对象上:

`user.photoPath = event.target.files[0].name;`

在组件类中，您可以在 uploader 上监听 onCompleteItem 和 onErrorItem。在这两个处理程序中，您都将获得文件名，并且可以循环用户以找到正确的文件名，然后根据上传结果保存或放弃更改。