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

Question

两部分问题。

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

编辑:我阅读了很多指南，将图像名称保存到数据库，然后将实际图像保存在文件夹中。这不是我所追求的，想要将图像保存到数据库，然后能够从数据库中获取它并呈现它。

Answer 1

这花了我一些时间，但我终于想通了。

第一步(保存到数据库):

必须获取整个流数据并像这样读取它:

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?

如果出于某种原因我想在数据库中保存图像并最终解决它，我专注于找出如何做到这一点。