我一直在尝试让
ngFileUpload工作,以便我可以上传图像并将它们发送到数据库 – 在我的情况下是一个
mongoLab数据库,它接受可以使用如下语法进行POST的JSON对象：
- $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 {}
- $$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上做这一切所以看起来浏览器已经读取了图像的所有属性,但我不知道如何将其转化为有意义的洞察力,我可以用它将图像存储到我的外部数据库中.
谢谢你的帮助.
解决方法
我最终使用了
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,config) {
…等等.
我想那会为你做的.获取blob数据可能会令人困惑,因为当您上传图像时,您无法在示波器中看到任何数据 – 尽管图像的其他元数据将会显示出来！这个create_blob函数应该以blob格式为您提供.尝试执行console.log(reader.readAsDataURL(file);在该函数内部直接查看数据.
我花了很长时间才弄明白,而且我不确定这是否是最好的方法 – 如果有人知道更好,请随时提出建议！
