質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Google Cloud Storage

Google Cloud Storageは、グーグル社が提供しているクラウドベースのデベロッパー・企業向けストレージサービス。可用性に優れ、APIで操作可能なため、データのアーカイブ保存やアプリケーションのコンテンツ提供など様々な用途に活用できます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Q&A

0回答

277閲覧

fs.createReadStream、fs.createWriteStreamを用いて,ローカルに保存したpng画像データをユーザーにダウンロードさせたい

nashiokun

総合スコア2

Google Cloud Storage

Google Cloud Storageは、グーグル社が提供しているクラウドベースのデベロッパー・企業向けストレージサービス。可用性に優れ、APIで操作可能なため、データのアーカイブ保存やアプリケーションのコンテンツ提供など様々な用途に活用できます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

0グッド

0クリップ

投稿2022/10/24 08:14

前提

GCP上に保存している画像データをユーザにダウンロードさせるため、以下のapiを作成しました。

現在、apiとして以下のようなものを作成しました。

import type { NextApiRequest, NextApiResponse } from 'next'; import { Storage } from '@google-cloud/storage'; import fs, { stat } from 'fs'; export default function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method == 'POST') { // Creates a client const { datasetUrl }: { datasetUrl: string } = req.body; const storage = new Storage({ projectId: process.env.GCP_PROJECT_ID, keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS, }); var stat = fs.statSync('sample.png'); res.writeHead(200, { 'Content-Type': 'image/png', 'Content-Disposition': 'attachment; filename=' + datasetUrl, 'Content-Length': stat.size, }); storage .bucket(process.env.GCLOUD_STORAGE_BUCKET!) .file(datasetUrl) .createReadStream() .pipe(res); } }

想定としては、こちらのAPIを呼び出し、data内のbinaryデータを使用して、ライブラリ'js-file-download'にてダウンロードします。

const res = await fetch('POST", '/api/download', {datasetUrl // }); fileDownload(res.data, 'sample.png');

しかし、ダウンロード結果のpngファイルが壊れており、適切にダウンロードできません。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • GCPから適切にダウンロードができる

発生している問題・エラーメッセージ

pngファイルを開く際、

ファイルが壊れているか、“プレビュー”が認識しないフォーマットを使用している可能性があります。

上のようなメッセージがポップアップとともに出現します。

また、本来pngのところ、敢えてtxtファイルでも出力してみたのですが、

①本物のpngファイルをtxtに変換したもの(正解ファイル)

�PNG  ��� IHDR������������>a����sBIT|d���kIDATx��]k�$Wu���3���zwg��kwg�yټ ��$`����c ?HDx$���"�HID a%Ȱ��X@H%�� �w�쬍�ޙ}zgg���3�UuN����n4���T�:u�����~�E8X80�9�O����9~��g��l��Fp�[��s2�>\����q�s2�>\ p~�� p��_@Q�;�M � ��-`{��������V��j��&� ����U?����0�ԣ/� �U��\�q� �<2va��B5W����PL"xDn���8l#0��K� 6q�V��]��o*�9oؑ�p Y����10�����}�+����J �6qv�V�%2|I�M�Ͱ�������8�a��P*�;�Y$Pƛ8[���E�OЏ����=��9mb�𶀂P��5�̨6���X�;3Ƕ4Y�61Lx�����X4�2�5��Y{ 0�{�Q����s�[@�l� p.� +(���͑���&�N8������j.�d�`g!�-�<��I��˛aa�2F�4��E�=2��™<I�s 0t���D��qJa�OS�;���K�Z� �3�/��&g�޷���f��+��򥂶S�.ٺe|��G

②出力結果をtxtにしたもの

�PNG  ��� IHDR������������>a����sBIT|d���kIDATx��]k�$Wu���3���zwg��kwg�yټ ��$`����c ?HDx$���"�HID a%Ȱ��X@H%�� �w�쬍�ޙ}zgg���3�UuN����n4���T�:u�����~�E8X80�9�O����9~��g��l��Fp�[��s2�>\����q�s2�>\ p~�� p��_@Q�;�M � ��-`{��������V��j��&� ����U?����0�ԣ/� �U��\�q� �<2va��B5W����PL"xDn���8l#0��K� 6q�V��]��o*�9oؑ�p Y����10�����}�+����J �6qv�V�%2|I�M�Ͱ�������8�a��P*�;�Y$Pƛ8[���E�OЏ����=��9mb�𶀂P��5�̨6���X�;3Ƕ4Y�61Lx�����X4�2�5��Y{ 0�{�Q����s�[@�l� p.� +(���͑���&�N8������j.�d�`g!�-�<��I��˛aa�2F�4��E�=2��™<I�s 0t���D��qJa�OS�;���K�Z� �3�/��&g�޷���f��+��򥂶S�.ٺe|��G

となり、同じ結果だったため大きくおかしい点は無いと思います。(20行のみ表示)
ただ、res.dataの結果がbinaryではなくstringだったため、文字コードなどエンコーディングの点でおかしい点があるのかと予想しております。

解決方法をご存知であれば教えていただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問