У меня есть Express API и клиент Node / React.Клиент делает запрос, чтобы запросить файлы изображений из API, который получает их от S3, а затем отвечает потоком:
fs.readdir(tempDir, function (err, files) {
if (err) {
return console.log('Unable to scan directory: ' + err);
}
let filesData = files.map(file => fs.readFileSync(`${tempDir}/${file}`));
res.status(200).send(filesData);
});
Возвращает действительный ответ с допустимым ReadableStream.Теперь я пытаюсь понять, как читать каждое изображение из этого потока.Примеры, которые я нахожу, только детально показывают, как получить одно изображение из потока, а не как различать и генерировать несколько изображений:
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = [].slice.call(new Uint8Array(buffer));
bytes.forEach((b) => binary += String.fromCharCode(b));
return window.btoa(binary);
};
res.arrayBuffer()
.then((buffer) => {
console.log(buffer);
var base64Flag = 'data:image/gif;base64,';
var imageStr = arrayBufferToBase64(buffer);
this.setState({
imageSrc: base64Flag + imageStr
});
});
В этом примере изображение не отображается в теге (src= {this.state.imageSrc}), и, кажется, все усложняет.
const reader = stream.getReader();
let newStream = new ReadableStream({
start(controller) {
return pump();
function pump() {
return reader.read().then(({ done, value }) => {
if (done) {
controller.close();
return;
}
controller.enqueue(value);
return pump();
});
}
}
})
.then(stream => new Response(stream));
В этом примере показано, что ошибка «anonymous.then ()» не является функцией.В нем также не рассматривается, как читать несколько файлов (веб-документы Mozilla).
Моя конечная цель - прочитать несколько изображений из потока и затем создать кучу тегов с помощью React.Похоже, это должен быть простой процесс.
Спасибо!