AngularJS上传文件并将其发送到数据库
我一直在努力让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
其中没有包含可以存储到数据库的实际图像二进制文件。 我基本上不知道实际图像本身实际上传到哪里！
同样重要的是要注意，我没有通过这种语法从服务器获得响应 - 但是，如果我可以获取映像的二进制文件，我可以使用熟悉的$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, status,headers,config) {
...等等。
我认为这会为你做到。 获取blob数据可能会造成混淆，因为当您上传图像时，无法看到示波器中的任何数据 - 尽管图像的其余部分数据将显示出来！ 这个create_blob函数应该以blob格式为您提供。 尝试做一个console.log(reader.readAsDataURL(file);在该函数内直接查看数据。
我花了很长时间才弄清楚，我不确定这是否是最好的方法 - 如果有人知道更好，请随时提出建议！ :-)
链接地址: http://www.djcxy.com/p/27003.html