AngularJS上传文件，并将其发送到DB [英] AngularJS Upload a file and send it to a DB

问题描述

我一直试图让 ngFileUpload 工作，这样我可以上传图片和让他们发送到DB-在我的情况下， mongoLab DB它接受JSON对象，可以是 POST ED与这样的语法：

I've been trying to get ngFileUpload working so that I can upload images and have them sent to a DB–in my case a mongoLab DB which accepts JSON objects that can be POSTed with a syntax like this:

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

非常简单。不过，我对如何使用发送 ngFileUpload 到数据库上传的图片困惑。我使用ngFileUpload的文档页面上推出了熟悉的语法：

Fairly simple. However, I'm confused on how to send images uploaded using ngFileUpload to the DB. I'm using the familiar syntax introduced on ngFileUpload's documentation page:

$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);
                });
            }
        }
 }

不过，在记录的文件对象了，我得到的对象：

But, upon logging the file object out, I get the object:

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中的实际图像的二进制。我根本不知道在实际图像本身实际上是被上传到！

None of which, contain the actual image binary which could be stored to the DB. I essentially have no idea where the actual image itself is actually being uploaded to!

同样重要的是要注意，我不是从服务器获取与此响应语法不过，如果我能得到图像的二进制我可以使用熟悉的 $ http.post 方法和图像推入DB自己。

It's also important to note that I am not getting a response from the server with this syntax—though, if I could get the image's binary I could just use the familiar $http.post method and push the image into the DB myself.

我如何才能找到上传的图片的二进制文件，并将其推入数据库？哪里的形象存在，正在上传，并在​​公司的IT甚至被上传到后？我做这一切的本地主机如此看来，浏览器已经阅读图像的所有属性，但我不知道如何把它变成有意义的见解：我可以用图像存储到我的外部数据库。

How can I find the uploaded image's binary, and push it into the DB? Where does the image exist, after being uploaded—and where's it even being uploaded to? I'm doing this all on localhost so it seems that the browser has read all the properties of the image, but I'm not sure how to turn this into meaningful insight that I can use to store the image into my external DB.

感谢您的帮助。

推荐答案

我结束了使用的的FileReader API 。最具体，读URI为一滴。我实现了像在自定义指令以下。最后我在内的很多 ATTRS的阅读这将允许该指令在同一所使用的隔离范围多次页，但我会离开，在这里。我可以为您提供整个指令，如果它会是有益的，虽然，但简单地说，它看起来是这样的：

I ended up using the FileReader API. Most specifically, reading the URI as a blob. I implemented something like the following in a custom directive. I ended up including a lot of attrs reading which would allow the directive to be used multiple times in isolated scopes on the same page—but I'll leave that out here. I can provide you with the entire directive if it'd be helpful though—but briefly, it looked something like this:

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) {

...等。

我认为这会为你做它。获取一滴数据可能会造成混淆，因为当你上传的图片你看不到任何它在数据范围，虽然图像的元数据的其余部分将现身！这 create_blob 函数应该得到它，你虽然BLOB格式。试着做一个的console.log（reader.readAsDataURL（文件）; 该函数内部直接看到数据

I think that will do it for you. Getting the blob data can be confusing because when you upload the image you can't see any of it's data in the scope—though the rest of the image's meta data will show up! This create_blob function should get it for you though in blob format. Try doing a console.log(reader.readAsDataURL(file); inside that function to see the data directly.

我花了很长时间才弄明白，我不知道这是做它，如果任何人知道任何好转，请随时提出的最佳途径！ :-)

It took me a long time to figure out, and I'm not sure if this is the best way to do it—if anyone knows any better, please feel free to suggest! :-)

这篇关于AngularJS上传文件，并将其发送到DB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！