使用FileReader和AngularJS顯示圖像

Question

我已經看到了很多這樣的例子，但似乎仍然無法使我工作。

我有一個包含有關圖像信息的對象數組。 例如：

$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
    }
];

我需要能夠在圖庫中顯示這些圖像。 我一直在根據這個畫廊為我的畫廊建模，以供參考。

我正在嘗試通過在控制器中執行以下操作來顯示第一張圖像：

//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”。

從我所看到的示例中，我不確定它們何時出現圖像斑點？

Answer 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);

    };

您顯然需要觸發一些東西來接收圖像。 據我了解，未經許可，您無法訪問本地文件。 拖放將授予該目錄許可。