我正在尝试在我的实践项目中实现图像上传并保存到数据库功能。我创建了一个对话框模态，并为模态元素创建了3种不同的指令：一个用于文本输入，第二个用于选择（下拉），第三个用于文件上传。我在上传文件时遇到了麻烦，因为浏览器在var input = 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。
最佳答案
我相信您将参数传递给链接函数的顺序错误。
它应该是：
link : function(scope, element, attrs)
不：
link : function(scope, attrs, element)