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做这一切，所以似乎浏览器已经读取了图像的所有属性，但我不知道如何把它变成有意义的见解，我可以用来将图像存储到我的外部数据库。

谢谢你的帮助。

Answer 1

我结束了使用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议！ 🙂