[英]Attempting to retrieve all images from a folder outside server.js scope
I am working on what will be an embedded website for a piece of hardware with a file structure were only certain folders have read/write access. 我正在研究一个具有文件结构的硬件的嵌入式网站,只有某些文件夹具有读/写访问权限。 My server.js along with the angularjs implementation will be in a read only directory, however I need to display images that are going to be stored in a separate directory that will have read/write privileges as the end user can add images to the folder. 我的server.js和angularjs实现将在只读目录中,但是我需要显示将存储在具有读/写权限的单独目录中的图像,因为最终用户可以将图像添加到该文件夹。
I know I can read and send all the files from NodeJS to AngularJS with this code: 我知道我可以使用以下代码读取NodeJS中的所有文件并将其发送到AngularJS:
fs.readdir(fileDirectory, function(err,files){
files.forEach(function(file){
console.log('got file', file)
fs.readFile(fileDirectory + file, function(err, buffer){
var base64Image = new Buffer(buffer, 'binary').toString('base64');
// res.send(base64Image);
res.end(base64Image);
})
})
})
The problem I'm facing is I don't know how to have my frontend wait for all of the responses as the above will send one res per file, but angularJS stops listening for a res after the first once comes. 我面临的问题是我不知道如何让我的前端等待所有响应,因为上面将为每个文件发送一个res,但angularJS在第一次响应后停止侦听res。
Here is my AngularJS controller function: 这是我的AngularJS控制器功能:
$scope.servericon = [];
var iconarray = fmsFactory.getAllIcons().then(function(res){
console.log('controller got', res);
blob = b64toBlob(res.data, 'image/png')
blobUrl = URL.createObjectURL(blob);
img = document.createElement('img');
img.src = blobUrl.slice(5, blobUrl.length) //remove blob: from url
$scope.servericon.push(img.src)
// document.getElementByID('library').appendChild(img);
});
and my factory which is just a basic request 和我的工厂这只是一个基本要求
factory.getAllIcons = function(callback){
return $http({
url: '/allIcons',
method: 'GET'
}).then(function(res){
console.log('success', res);
return res
}, function(res){
console.log('something went wrong', res);
})
}
My expected results would be an array full of URL's to the files so that I can perform an ng-repeat on the servericon array and render the images with an img tag 我的预期结果将是一个充满URL的文件数组,以便我可以在servericon数组上执行ng-repeat并使用img标签呈现图像
Once you call res.end()
, the response is considered complete and you can't send anything else. 调用res.end()
,响应将被视为已完成,您无法发送任何其他内容。 Instead, you should be getting all the image data, combining it to a single buffer. 相反,您应该获取所有图像数据,将其组合到单个缓冲区。 It would look something like this: 它看起来像这样:
let promises = [];
fs.readdir(fileDirectory, function(err,files){
promises.push(new Promise((resolve, reject) => {
files.forEach(function(file){
console.log('got file', file)
fs.readFile(fileDirectory + file, function(err, buffer){
var base64Image = new Buffer(buffer, 'binary').toString('base64');
resolve(base64Image);
})
})
}))
})
Promise.all(promises).resolve(base64Image => {
res.send(base64Image)
res.send('\n::\n') // choose any delimiter that you can split on
}).then(() => res.end())
This will iterate through each file in the directory and push the result to an array of promises that will each resolve to the Buffer containing the image. 这将遍历目录中的每个文件,并将结果推送到promises数组,每个promise将解析为包含图像的Buffer。
Now, on the client side, you will need to grab the overall buffer and then split it up using the delimiter. 现在,在客户端,您需要获取整个缓冲区,然后使用分隔符将其拆分。 Something like this will work: 这样的东西会起作用:
$scope.servericon = [];
var iconarray = fmsFactory.getAllIcons().then(function(res){
console.log('controller got', res);
res.data.split('\n::\n').forEach(blob => {
blob = b64toBlob(res.data, 'image/png')
blobUrl = URL.createObjectURL(blob);
img = document.createElement('img');
img.src = blobUrl.slice(5, blobUrl.length) //remove blob: from url
$scope.servericon.push(img.src)
// document.getElementByID('library').appendChild(img);
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.