Question

我使用angular directive.my指令完成了多个图像上传，如下所示

$scope.files = [];
$scope.$on("fileSelected", function (event, args) {
    $scope.$apply(function () { 
        $scope.files.push(args.file);
    });
});

在我的控制器中将所有选定的文件推送到数组

<div ng-repeat="step in files">
<img ng-src="{{step}}" />{{step.name}}
</div>

在我的视图文件中，我使用ng-repeat显示所有选定的图像。我的视图页面代码如下所示

react-router-dom

但在这里我的问题是我只能显示图像名称，但我想显示所有选定的图像而不是名称

Answer 1

要显示当前选定的文件，您可以使用FileReader API读取它，并在img src中提供base64字符串。

<强> HTML

<input type="file" file-upload /> {{files.length}}
<div ng-repeat="step in files">
  <img ng-src="{{step.src}}" />{{step.src}}
</div>

<强>代码

$scope.$on("fileSelected", function(event, args) {
  var item = args;
  $scope.files.push(item);
  var reader = new FileReader();

  reader.addEventListener("load", function() {
    $scope.$apply(function() {
      item.src = reader.result;
    });
  }, false);

  if (item.file) {
    reader.readAsDataURL(item.file);
  }
});

Live Demo

在上传多个图像时显示图像

1 个答案: