javascript - Angular js : Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader' : parameter 1 is not of type 'Blob'

Question

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

Angular 代码:

        $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，因为这里的元素是事件的参数解析

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

看到这个 fiddle http://jsfiddle.net/ADukg/9867/