使用 FileReader 和 AngularJS 显示图像答案

【问题标题】：Display image using FileReader and AngularJS使用 FileReader 和 AngularJS 显示图像
【发布时间】：2017-08-04 14:40:58
【问题描述】：

我见过很多这样的例子，但似乎仍然无法让我的工作。

我有一个包含图像信息的对象数组。例如：

$scope.images = [
    {
      "id": 1,
      "type": "cloud",
      "caller_id": "me@me.me",
      "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\Chrysanthemum.jpg",
      "image_results": 23,
      "image_id": 3243242
    },
    {
      "id": 2,
      "type": "cloud",
      "caller_id": "me@me.me",
      "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\Desert.jpg",
      "image_results": 98,
      "image_id": 3125312
    },
    {
      "id": 3,
      "type": "cloud",
      "caller_id": "me@me.me",
      "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\DSC_9864.jpg",
      "image_results": 1,
      "image_id": 927192
    }
];

我需要能够在图片库中显示这些图片。我一直在用this gallery 为我的画廊建模，以供参考。

我试图通过在我的控制器中执行以下操作来显示第一张图像：

//Image information
$scope.currentImage = _.first($scope.images);

//Display image
var reader = new FileReader();
reader.onload = function(event) {
    $scope.$apply(function() {
        $scope.image_source = reader.result;
    });
};
reader.readAsDataURL($scope.currentImage.image_path);


$scope.setCurrentImage = function(image){
    $scope.currentImage = image;
}

在我的 HTML 中，我有：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div ng-controller="jobsSampleImageController">

      <h2>AngularJS Powered Photo Album <small>by Josh Adamous</small> </h2>
        <div class="row">
          <div class="col-md-9">
            <div class="albumImage">
              <img id="current_image" ng-src="{{image_source}}" alt="{{currentImage.caller_id}}"/>
            </div>
            <h3>{{currentImage.caller_id}}</h3>

          </div><!-- End of Column -->
          <div class="col-md-3">
            <div class="wrapper">
              <ul class="list">
                <li ng-repeat="image in images" ng-click="setCurrentImage(image)">
                  <img ng-src="{{image_source}}" alt="{{image.caller_id}}"/>
                </li>
              </ul><!-- End of List -->
            </div><!-- End of Wrapper -->
          </div><!-- End of Column -->
        </div><!-- End of Row -->
      </div><!-- End of Album Controller -->
    </div><!-- End of Column -->
  </div><!-- End of Row -->
</div><!-- End of Container -->

这会导致错误：

TypeError：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型。

从我看到的示例中，我不完全确定他们何时获得图像 blob？

【问题讨论】：

我认为您不能在这种情况下使用 file:// 类型路径。
@Claies 删除file:///后得到相同的结果
你误会了。我的意思是，浏览器无法访问计算机本地硬盘驱动器上的图像（file:// 路径），只能访问网络上的图像（http:// 路径）。换句话说，C:\\Users\\Public\\Pictures\\Sample Pictures\\Desert.jpg 无法在浏览器中访问。
@Claies 我知道，但就我而言，我需要显示本地文件。我看到使用 FileReader 是解决此问题的一种潜在方法
那个答案不会做同样的事情。该答案要求用户上传文件，然后显示文件而不将文件发送到服务器。您试图在用户未明确上传的情况下显示用户硬盘上的文件，这在浏览器中是不允许的。

标签： javascript angularjs filereader

【解决方案1】：

这对我有用。我有一个上传器项目，允许您删除图像并在您上传图像时显示图像，为此它使用FileReader。

我的代码：

function handleDrop(event) {
        var length = event.dataTransfer.files.length;
        for (var i = 0; i < length; i++) {
            var entry = event.dataTransfer.items[i].webkitGetAsEntry();
            if (entry.isFile) {
                console.log('File Uploaded', entry);
                entry.file(function (myFile) {
                    if (entry.name.indexOf(".ini") < 0) {
                        handleThumbnails(myFile, entry.name, i)//This will handle displaying the images

                    }
                }, errorHandler);
            } else if (entry.isDirectory) {

            }
        }
    };

 function handleThumbnails(f, name, ind) { //Displaying images
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                var img = document.createElement('img');
                img.setAttribute("id", name + ind);
                img.setAttribute("src", e.target.result);
                img.setAttribute("class", "imagePreview");
                img.setAttribute("title", name);
                document.body.appendChild(img);
            };
        })(f);
        reader.readAsDataURL(f);

    };

你显然需要触发一些东西来接收图像。据我了解，未经许可，您无法访问本地文件。拖放将授予该目录的权限。

【讨论】：