Angular 2 - 上传数组中的文件

Question

我在尝试使用数组内的上传器时遇到问题：

我使用 "ng-repeat" 在 table 中列出了一组用户。我想添加一个带有按钮的列来为每个人上传图像。我目前正在使用 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;
};

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

问题是我找不到从每个用户获取上传文件路径的方法，将其保存在一个变量中，这样我就可以将其保存到数据库中。

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

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

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

感谢您的指导。

Answer 1

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

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

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

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

并且在组件 class 中，您监听 onCompleteItem 和 onErrorItem 的上传器。在这两个处理程序中，您将拥有文件的名称，您可以遍历用户以找到正确的文件，并根据上传结果保存或放弃更改。

Angular 2 - 上传数组中的文件

Angular 2 - upload file in array

javascript

angular

file-upload

ng2-file-upload