【问题标题】：Angularjs : Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'Angularjs：未捕获的 TypeError：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型
【发布时间】：2017-06-24 09:10:34
【问题描述】：

我需要在一个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。

任何人都可以帮助我提前非常感谢。

【问题讨论】：

尝试 element.files[0]
不要使用readAsDataURL，改用URL.createObjectURL(element.files[0])，一旦图片加载或出错，别忘了撤销url

标签： javascript jquery angularjs

【解决方案1】：

您的代码需要 2 处更改

1 : 它不是 element.files 而是 element.target 作为元素这里是参数解析到事件

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/

【讨论】：