AngularJS上传文件并发送给数据库

我一直试图让ngFileUpload工作,以便我可以上传图像,并将它们发送到DB – 在我的情况下,一个mongoLab数据库接受JSON对象,可以用这样的语法POST

 $http.post('myMongoName/myDb/myCollection/myTable', {'key': 'value'}) 

相当简单。 然而,我很困惑如何发送使用ngFileUpload上传到数据库的图像。 我在ngFileUpload的文档页面上使用了熟悉的语法:

 $scope.upload = function (files) { if (files && files.length) { for (var i = 0; i < files.length; i++) { var file = files[i]; console.log(file); Upload.upload({ url: myMongoLabURL, fields: {'sup': 'sup'}, file: file }) }).success(function (data, status, headers, config) { console.log('file ' + config.file.name + 'uploaded. Response: ' + data); }); } } } 

但是,在loggingfile对象时,我得到这个对象:

 File {} $$hashKey: "object:76" lastModified: 1433922719000 lastModifiedDate: Wed Jun 10 2015 00:51:59 GMT-0700 (PDT) name: "1.png" size: 138024 type: "image/png" webkitRelativePath: "" __proto__: File 

其中没有包含可以存储到数据库的实际图像二进制文件。 我基本上不知道实际图像本身实际上传到哪里!

同样重要的是要注意,我没有从服务器获得这个语法的响应 – 但是,如果我能得到图像的二进制文件,我可以使用熟悉的$http.post方法,并将图像自己推送到数据库中。

我怎样才能find上传的图像的二进制文件,并将其推入数据库? 图片在上传后在哪里存在?甚至上传到哪里? 我在localhost做这一切,所以似乎浏览器已经读取了图像的所有属性,但我不知道如何把它变成有意义的见解,我可以用来将图像存储到我的外部数据库。

谢谢你的帮助。

       

网上收集的解决方案 "AngularJS上传文件并发送给数据库"

我结束了使用FileReader API 。 最具体地说,读取URI作为一个blob 。 我在自定义指令中实现了类似下面的内容。 我最终包含了很多attrs阅读内容,可以让这个指令在同一个页面上的多个隔离的范围内被多次使用 – 但是我会把它留在这里。 如果能够提供帮助,我可以为您提供整个指令 – 但是简要地说,它看起来像这样:

 function create_blob(file) { var deferred = $q.defer(); var reader = new FileReader(); reader.onload = function() { deferred.resolve(reader.result); }; reader.readAsDataURL(file); return deferred.promise; } $scope.$watch('files', function() { $scope.upload($scope.files); }); $scope.upload = function(files) { $scope.loading = true; if (files && files.length) { for (var i = 0; i < files.length; i++) { var file = files[i]; var promise = create_blob(file); promise.then(function(result) { var thumb = resize(result); Upload.http({ url: '/path', data: result }) .progress(function (evt) { console.log(evt); var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); console.log('progress: ' + progressPercentage + '% '); }) .success(function (data, status,headers,config) { 

…等等。

我认为这样做会为你做。 获取blob数据可能会造成混淆,因为当你上传图片时,你不能看到它的任何数据 – 尽pipe图片的其余部分数据会显示出来! 这个create_blob函数应该能够以blob格式为您提供。 尝试做一个console.log(reader.readAsDataURL(file);里面的function直接看到数据。

我花了很长时间才弄清楚,我不确定这是否是最好的方法 – 如果有人知道更好,请随时提出build议! 🙂