Question

我正在使用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非常陌生，所以如果你能解释它就像新手一样，我会非常感激。

Answer 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);
};

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

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

1 个答案: