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

Question

我一直在尝试获取 ngFileUpload working so that I can upload images and have them sent to a DB–in my case a 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

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

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

如何找到上传图片的二进制文件，并将其推送到数据库中？图片在上传后存在于何处——甚至上传到哪里？我在 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 数据可能会造成混淆，因为当您上传图像时，您在范围内看不到它的任何数据——尽管图像的其余元数据会显示出来！这个 create_blob 函数应该以 blob 格式为您获取它。尝试在该函数内执行 console.log(reader.readAsDataURL(file); 以直接查看数据。

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

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

AngularJS Upload a file and send it to a DB

javascript

node.js

express

angularjs

ng-file-upload