1

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

我使用“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;
};

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

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

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

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

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

感谢您的指导。

4

1 回答 1

0

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

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

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

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

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

于 2017-07-23T07:13:55.087 回答