两部分问题。
第 1 部分:
我正在将图像上传到我的服务器并希望将其保存到我的数据库中。
迄今为止:
table :
解析器:
registerPhoto: inSequence([
async (obj, { file }) => {
const { filename, mimetype, createReadStream } = await file;
const stream = createReadStream();
const t = await db.images.create({
Name: 'test',
imageData: stream ,
});
},
])
执行查询:
Executing (default): INSERT INTO `images` (`Id`,`imageData`,`Name`) VALUES (DEFAULT,?,?);
但什么都没有保存。
我对此很陌生,我可能错过了一些东西,但不知道是什么。
第 2 部分:
接下来是第 1 部分,假设我设法保存了图像,我如何读取它并将其发送回我的 FE?
编辑:我阅读了很多指南,将图像名称保存到数据库,然后将实际图像保存在文件夹中。这不是我所追求的,想要将图像保存到数据库,然后能够从数据库中获取它并呈现它。
最佳答案
这花了我一些时间,但我终于想通了。
第一步(保存到数据库):
必须获取整个流数据并像这样读取它:
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?
如果出于某种原因我想在数据库中保存图像并最终解决它,我专注于找出如何做到这一点。
关于mysql - 如何在mysql中保存和检索图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61900626/