gpt4 book ai didi

mysql - 如何在mysql中保存和检索图像?

转载 作者:行者123 更新时间:2023-12-03 22:22:35 25 4
gpt4 key购买 nike

两部分问题。

第 1 部分:

我正在将图像上传到我的服务器并希望将其保存到我的数据库中。

迄今为止:

table :

enter image description here

解析器:

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 }
);

请注意,我添加了 LengthType 参数,如果您想在返回图像时返回流,则需要此参数。

第 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com