Angularjs 在上载多个图像时显示图像

我已经使用angular指令完成了多个图像上传。我的指令如下所示

    app.directive('fileUpload', function () {
    return {
        scope: true,        //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //iterate files since 'multiple' may be specified on the element
                for (var i = 0;i<files.length;i++) {
                    //emit event upward
                    scope.$emit("fileSelected", {file: files[i] });
                }                                       
            });
        }
    };
});

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

在我的视图文件中，我使用ng repeat显示所有选定的图像

    app.directive('fileUpload', function () {
    return {
        scope: true,        //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //iterate files since 'multiple' may be specified on the element
                for (var i = 0;i<files.length;i++) {
                    //emit event upward
                    scope.$emit("fileSelected", {file: files[i] });
                }                                       
            });
        }
    };
});

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

{{step.name}

---

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

要显示当前选定的文件，您可以使用

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>

---

当我点击提交按钮时，它会转到api（PHP）。如何在api中获取文件详细信息？@user7098427您必须将文件发送到api（

POST

）调用，因为当我使用此代码时，我会获取数据：image/jpeg；base64、/9j/4AAQSkZJRgABAgEAYABgAAD等…那么这怎么可能呢？实际上image/jpeg的含义是什么；base64、/9j/4AAQSkZJRgABAgEAYABgAAD等在ng repeat{{step.src}中。它是映像的

base64

版本。可以考虑从<代码>图像/JPEG中发送<代码> /9J/4AQQZJRGBAGADAGABAGAAD < /代码>；base64，/9j/4AAQSkZJRgABAgEAYABgAAD。但是当你在src上使用它时，你应该有

image/jpeg；base64，/9j/4AAQSkZJRgABAgEAYABgAAD