Question

如果只有某些文件夹具有读/写访问权限，我正在开发一个嵌入式网站，用于一个具有文件结构的硬件。我的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);
    })
  })
})

我面临的问题是我不知道如何让我的前端等待所有响应，因为以上内容将为每个文件发送一个资源，但是angularJS在第一个文件到来后就停止监听资源。 / p>

这是我的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标签渲染图像

Answer 1

致电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())

这将遍历目录中的每个文件，并将结果推送到一个Promise数组，每个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);
  })
});

尝试从server.js范围以外的文件夹中检索所有图像

1 个答案: