Question

我一直在努力让ngFileUpload正常工作，以便我可以上传图片并将它们发送到数据库 - 在我的情况下是一个mongoLab数据库，它接受可以是{{1的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

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

同样重要的是要注意我没有从服务器获得这种语法的响应 - 但是，如果我能得到图像的二进制文件，我可以使用熟悉的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上这样做，所以看起来浏览器已经读取了图像的所有属性，但我不知道如何将其变成有意义的洞察力，我可以用来将图像存储到我的外部数据库。

感谢您的帮助。

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上传文件并将其发送到数据库

1 个答案: