.find at element.find（）throws＆＃34; undefined不是函数＆＃34; - AngularJS，文件上传

Question

我正在尝试在我的练习项目上实现图像上传并保存到数据库功能。我为模态元素创建了一个对话模式和3个不同的指令：一个用于文本输入，第二个用于选择（下拉），第三个用于文件上传。我在上传文件时遇到问题，因为浏览器在var输入= element.find（“input”）[0]的.find上报告“未定义不是函数”错误;

我有这个看起来像这样的AngularJS指令。

collectionsApp.directive('formFileUpload', [function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            name: '@',
            fileread: '='
        },
        templateUrl: '/directives/formFileUpload.html',
        link: function(scope, attrs, element) {
            var input = element.find("input")[0];
            input.addEventListener("change", function(changeEvent){
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            })

        }
    }
}]);

我有这个formFileUpload.html来替换指令：

<div class="form-group">
    <label for="inputFile" class="col-sm-2 control-label">{{name}}</label>
    <div class='col-sm-3'>
        <input type="file">
    </div>
</div>

当我向模态体添加指令时，我将其添加如下：

<form-file-upload name="Book Cover Image" fileread="file"></form-file-upload>

现在，请记住，我打算使用base64转换此图像，将其存储为对象的属性并将其发送到db。

Answer 1

我相信你的链接函数传递参数的顺序是错误的。

应该是：

link : function(scope, element, attrs)

不

link : function(scope, attrs, element)