Angularjs：Uncaught TypeError：无法执行＆＃39; readAsDataURL＆＃39; on＆＃39; FileReader＆＃39;：参数1的类型不是＆＃39; Blob＆＃39;

Question

我需要在div上传多个图像，我尝试下面的

角度代码：

        $scope.stepsModel = [];
        $scope.imageUpload = function(element){
          var reader = new FileReader();
          reader.onload = $scope.imageIsLoaded;
          reader.readAsDataURL(element.files);
        }

        $scope.imageIsLoaded = function(e){
           $scope.$apply(function() {
            $scope.stepsModel.push(e.target.result);
           });
        }

html代码：

    <input type="file" ng-model-instant  name="myImage" accept="image/*" onchange="angular.element(this).scope().imageUpload(event)"/>

我收到了这个错误：

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
at b.$scope.imageUpload (new_ads.js:34)
at HTMLInputElement.onchange (new_ads:202)

我在这里看到一些链接，所有单张图片上传，我需要逐个上传多个图片到div。

任何人都可以提前多多帮助我。

Answer 1

您的代码需要2次更改

1：它不是element.files，而是element.target作为元素，这是param解析为事件

2：.files是您需要通过files [0]

选择第一个文件的数组

  $scope.imageUpload = function(element){
      var reader = new FileReader();
      reader.onload = $scope.imageIsLoaded;
      //console.log(element.target.files[0])
      reader.readAsDataURL(element.target.files[0]);

    }

请参阅此小提琴http://jsfiddle.net/ADukg/9867/