[英]Attempting to retrieve all images from a folder outside server.js scope
我正在研究一個具有文件結構的硬件的嵌入式網站,只有某些文件夾具有讀/寫訪問權限。 我的server.js和angularjs實現將在只讀目錄中,但是我需要顯示將存儲在具有讀/寫權限的單獨目錄中的圖像,因為最終用戶可以將圖像添加到該文件夾。
我知道我可以使用以下代碼讀取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);
})
})
})
我面臨的問題是我不知道如何讓我的前端等待所有響應,因為上面將為每個文件發送一個res,但angularJS在第一次響應后停止偵聽res。
這是我的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);
});
和我的工廠這只是一個基本要求
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);
})
}
我的預期結果將是一個充滿URL的文件數組,以便我可以在servericon數組上執行ng-repeat並使用img標簽呈現圖像
調用res.end()
,響應將被視為已完成,您無法發送任何其他內容。 相反,您應該獲取所有圖像數據,將其組合到單個緩沖區。 它看起來像這樣:
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())
這將遍歷目錄中的每個文件,並將結果推送到promises數組,每個promise將解析為包含圖像的Buffer。
現在,在客戶端,您需要獲取整個緩沖區,然后使用分隔符將其拆分。 這樣的東西會起作用:
$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.