angular-file-upload -在浏览器中显示上传的图片，而不从后端流式传输

Question

我正在使用nervgh/angular-file-upload让用户从他的手机相机中拍摄照片并上传。它工作得很好，但现在我也想显示图像。当然，我可以将该功能添加到我的后端，只需使用img-tag并将其指向URL。但是因为我上传了我的JavaScript文件，所以在某些时候已经有了这个文件，对吧？如何显示？我是这样尝试的：

<img ng-src="data:image/JPEG,{{uploadedImage}}">

但不能让它工作。根据wiki of angular-file-upload，我可以控制一个"FileItem"，但是我似乎找不出实际的文件日期存储在哪里。

所以我的问题是:是否可以使用带有ng-src的img标记来显示直接作为字节数组存储在JavaScript中的文件，以及angular- file -upload在哪里存储实际的数组数据

Answer 1

您需要使用ngf-thumbnail选项

<div|span|...
 *ngf-thumbnail="file" //Generates a thumbnail version of the image file
 ngf-size="{width: 20, height: 20, quality: 0.9}" the image will be resized to this size
        // if not specified will be resized to this element`s client width and height.
 ngf-as-background="boolean" //if true it will set the background image style instead of src attribute.
>

看一下这个小提琴Click Here

<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">

这行代码帮助我们显示用户上传的图片的缩略图，你可以按照上面的建议选择不同的html标签。您必须使用文件名链接图像，在这种情况下，ng-model是picFile，它被用作ngf-thumbnail。

你也可以在上面使用你自己的css。

Answer 2

您可以使用fileReader。绑定ngModel文件，然后转换为base64并将其用作图像源

var reader = new FileReader();
    reader.readAsDataURL(scope.ngModel);
    reader.onload = function(readerResult) {
        $scope.$apply(function(){
                $scope.mysrc = reader.result;
        });

    };