Javascript 通过readAsDataURL从文件输入读取文件不起作用

我有以下代码

指令

.directive('area', function () {
    return {
        link: function (scope, el, attrs) {
            var fileReader = new FileReader();

            fileReader.onload = function (e) {
                scope.image = e.target.result;
                scope.$apply();
            }

            el.on('change', function () {
                fileReader.readAsDataURL(el[0].files[0]);
            });
        }
    };
});

控制器

.controller('areaController',
    ['$scope', 
        function ($scope) {
            $scope.image = "";
        }
    ]
);

不知何故，当我将一个图像添加到文件输入时，我得到了以下错误

---

areaDirective.js:19未捕获类型错误：无法读取未定义的属性“0”

我想您应该将其修改为

el.on('change', function (e) {
 var files = (e.srcElement || e.target).files
    fileReader.readAsDataURL(files[0]);
 });