使用 ng-repeat 中的 angular-file-upload 获取多个上传文件的文件路径答案

【问题标题】：Get file paths for multiple uploaded files with angular-file-upload within ng-repeat使用 ng-repeat 中的 angular-file-upload 获取多个上传文件的文件路径
【发布时间】：2016-12-06 09:39:51
【问题描述】：

我正在使用 Angular 1 和 angular-file-upload 插件。

我想创建一个按以下方式填充的数组：

result = [{
  name: "whatever string",
  uploadedFilePath: "/whatever/path/image.png"
}, {
  name: "other string",
  uploadedFilePath: "/whatever/path/otherImage.png"
}]

在视图中，我有一个ng-repeat，其中包含一个名称输入和一个文件输入字段以及一个用于在ng-repeat 中创建具有相同字段的另一张卡片的按钮。

我可以毫无问题地将名称添加到相应对象中的数组中。

如果有一个上传输入而不是ng-repeat（文件输入或多个），我可以通过事件轻松获取路径：

vm.uploader.onCompleteItem = function(fileItem, response, status, headers) {
  vm.uploadedFilePaths.push(response.filePath);
};

然后从vm.uploadedFilePaths获取路径。

我不知道在视图中显示文件输入的任何好的做法，所以我正在使用：

<input type="file" ng-file-model="files" multiple />
<p ng-repeat="file in files">
  {{file.name}}
</p>

不知道如何获取每个上传文件对应的路径，并添加到数组中对应的对象中。

我有点自信我应该在最后使用事件vm.uploader.uploadAll(); 将它们放在相应的位置？但是我如何找到每个对应的位置，我不确定我如何在这里使用$index。

我对使用angular-file-upload 非常陌生，所以如果您能像为新手一样解释它，我将不胜感激。

【问题讨论】：

标签： javascript angularjs angular-file-upload

【解决方案1】：

将对象声明为

vm.fileDetails = {
                       name:"",
                       path:""
                      }

然后就上传完成

vm.uploader.onCompleteItem = function(fileItem, response, status, headers) {
  vm.fileDetails.name = response.fileName;
  vm.fileDetails.path = response.filePath;
  vm.uploadedFilePaths.push(vm.fileDetails);
};

现在您可以在视图中使用此数组来获取详细信息。

【讨论】：