这花了我一些时间，但我终于弄明白了。
第一步（保存到数据库）：
必须获取整个流数据并像这样读取它：
export const readStream = async (stream, encoding = 'utf8') => {
stream.setEncoding('base64');
return new Promise((resolve, reject) => {
let data = '';
// eslint-disable-next-line no-return-assign
stream.on('data', chunk => (data += chunk));
stream.on('end', () => resolve(data));
stream.on('error', error => reject(error));
});
};
这样使用：
const streamData = await readStream(stream);
在保存之前，我将流放入缓冲区：
const buff = Buffer.from(streamData);
最后是存档部分：
db.images.create(
{
Name: filename,
imageData: buff,
Length: stream.bytesRead,
Type: mimetype,
},
{ transaction: param }
);
请注意，我添加了Length 和Type 参数，如果您希望在返回图像时返回流，则需要此参数。
第 2 步（检索图像）。
正如@xadm 多次所说，您不能从 GRAPHQL 返回图像，过了一段时间我不得不接受这个事实，希望 graphql 将来能解决这个问题。
S 我需要做的是在我的 fastify 后端设置一个路由，发送一个图像 ID 到这个路由，获取图像然后返回它。
我对此有一些不同的方法，但最后我简单地返回了一个二进制文件，并在前端将其编码为 base64。
后端部分：
const handler = async (req, reply) => {
const p: postParams = req.params;
const parser = uuIdParserT();
const img = await db.images.findByPk(parser.setValueAsBIN(p.id));
const binary = img.dataValues.imageData.toString('binary');
const b = Buffer.from(binary);
const myStream = new Readable({
read() {
this.push(Buffer.from(binary));
this.push(null);
},
});
reply.send(myStream);
};
export default (server: FastifyInstance) =>
server.get<null, any>('/:id', opts, handler);
前端部分：
useEffect(() => {
// axiosState is the obj that holds the image
if (!axiosState.loading && axiosState.data) {
// @ts-ignore
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
// @ts-ignore
// eslint-disable-next-line no-plusplus
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
return blob;
};
const blob = b64toBlob(axiosState.data, 'image/jpg');
const urlCreator = window.URL || window.webkitURL;
const imageUrl = urlCreator.createObjectURL(blob);
setimgUpl(imageUrl);
}
}, [axiosState]);
最后在 html 中：
<img src={imgUpl} alt="NO" className="imageUpload" />
其他：
对于尝试相同注意的任何人来说，这不是最佳实践。
我发现的几乎每一篇文章都将图像保存在服务器上，并将图像 ID 和其他元数据保存在数据库中。对于这方面的确切利弊，我发现以下内容很有帮助：
Storing Images in DB - Yea or Nay?
如果出于某种原因我想将图像保存在数据库中并最终解决它，我专注于找出如何做到这一点。