Question

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

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

但无法让它发挥作用。根据{{3}}，我控制了一个＆＃34; FileItem＆＃34;，但我似乎无法确定存储实际文件日期的位置。

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

Answer 1

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

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

    };

Answer 2

您需要使用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。

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

2 个答案: