AngularJS上传文件并将其发送到数据库

Question

我一直在努力让ngFileUpload 工作,以便我可以上传图像并将它们发送到数据库 - 在我的情况下是一个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);
                });
            }
        }
 }

但是,在记录file对象时,我得到了对象:

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 

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

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

如何找到上传图像的二进制文件,并将其推入数据库？上传后图像存在于何处 - 甚至上传到何处？我正在这样做,localhost所以看起来浏览器已经读取了图像的所有属性,但是我不知道如何将其变成有意义的洞察力,我可以用来将图像存储到我的外部数据库中.

谢谢你的帮助.

Answer 1

我最终使用了FileReader API。最具体地说，将 URI 读取为blob. 我在自定义指令中实现了类似以下内容的内容。我最终包含了大量attrs阅读内容，这将允许该指令在同一页面\xe2\x80\x94 上的独立范围内多次使用，但我将把它留在这里。如果有帮助的话，我可以为您提供整个指令 \xe2\x80\x94 但简单地说，它看起来像这样：

\n\n

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

\n\n

...ETC。

\n\n

我想这会为你做的。获取blob数据可能会令人困惑，因为当您上传图像时，您在范围\xe2\x80\x94中看不到任何数据，尽管图像的其余元数据会显示！该create_blob函数应该以 blob 格式为您提供它。尝试在该函数内部执行操作console.log(reader.readAsDataURL(file);以直接查看数据。

\n\n

我花了很长时间才弄清楚，我不确定这是否是最好的方法\xe2\x80\x94如果有人知道更好，请随时提出建议！:-)

\n