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

【问题标题】：angular-file-upload - display uploaded image in browser without streaming it from backendangular-file-upload - 在浏览器中显示上传的图像而不从后端流式传输
【发布时间】：2016-12-23 18:45:32
【问题描述】：

我正在使用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 将实际数组数据存储在哪里

【问题讨论】：

所以你想在你的应用或浏览器中预览上传的图片？？
没错。如果可能的话，我想显示用户刚刚上传的文件而不调用后端（我认为应该这样做）
上传前显示预览可以吗？
可以，您可以直接使用用户尝试上传的图片。

标签： angularjs angular-file-upload

【解决方案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。

【讨论】：

【解决方案2】：

你可以使用 fileReader。绑定ngModel文件然后转base64作为图片源

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

    };

【讨论】：