![](/img/trans.png)
[英]how to retrieve image from webapi url folder using angular js?
[英]Retrieve image file from url using JS / Angular
我正在使用MongooseJS作为数据模型的桥梁,将数据从wordpress环境导出到MongoDB。 我有一个包含所有必需信息的每个对象的JSON。
例如,我有一个用户项目,其中包含一个指向WordPress服务器url的avatarpath字段:(例如: http://url/wp-content/upload/img/avatar.jpg )
我要执行的操作是从URL中检索图像,将其上传到我的新存储文件夹,检索新路径,并将新对象存储在mongodb中。
我的问题是,我无法设法找到一种从http get或任何其他方式获取文件数据的方法。 通常,我在html中有一个文件输入,然后从该输入的文件对象开始。 我应该如何进行这项工作? 我走错了方向吗?
我找到了这个答案,但似乎已被弃用: 如何使用FileReader API从url上传图像文件?
这是我现在所拥有的:
$scope.curateurs_data = {};
$scope.curateurs = [];
$http.get('resources/json_curateurs.json').success(function(data) {
$scope.curateurs_data = data;
console.log(data[0]);
$scope.getPics();
});
//RETRIEVE IMAGE DATA
$scope.getPics = function(data){
console.log("RETRIEVING PICTURE")
var uploadPlace = '/upload/user';
var images;
angular.forEach($scope.curateurs_data, function(item, key) {
$scope.curitem = item;
console.log($scope.curitem);
$http.get(item.avatarpath, {responseType: "arraybuffer"}).success(function(data){
var arrayBufferView = new Uint8Array( data );
var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
console.log(imageUrl);
console.log(blob);
images = blob;
var pic = {
images: images
};
Upload.upload({
url: uploadPlace,
arrayKey: '',
data: pic,
}).then(function(response) {
// Adding data paths to formData object before creating mood
// MUST respect images array order
$scope.curitem.avatarpath = response.data.files[0].path;
console.log(response.data.files[0].path);
});
}).error(function(err, status){})
$scope.curateurs.push($scope.curitem);
});
}
我也尝试过类似的方法,但似乎无法使其正常工作。
$http.get(item.avatarpath,{responseType: "blob"}).
success(function(data, status, headers, config) {
// encode data to base 64 url
fr = new FileReader();
fr.onload = function(){
// this variable holds your base64 image data URI (string)
// use readAsBinary() or readAsBinaryString() below to obtain other data types
console.log( fr.result );
};
fr.readAsDataURL(data);
console.log(fr.readAsDataURL(data));
}).
error(function(data, status, headers, config) {
alert("The url could not be loaded...\n (network error? non-valid url? server offline? etc?)");
});
在后端使用节点的http对象下载图像。 就像是:
http.request(url, function(response) {
// Your code to write the file out or store it in the database here.
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.