angular-file-upload

Question

我正在使用 nervgh/angular-file-upload 让用户从他的手机 phone 相机拍摄照片并上传。它工作正常，但现在我也想显示图像。当然，我可以将该功能添加到我的后端，只需使用 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

您可以使用 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.
>

看看这个fiddleClick Here

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

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

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

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

angular-file-upload - display uploaded image in browser without streaming it from backend

angularjs