0

前提・実現したいこと

Node.jsで画像をサーバーアップロードして表示するというちょっとしたWebアプリケーションを作ろうとしています。
まずは画像をアップロードするところを作ろうと思い下記のサイトを参考にして作成しました。
しかし、アップロードされた画像が表示できない形式になってしまっているため、どうしたら表示できる形式で出力できるのか教えていただきたいです。

Node.jsで画像アップロードを受けつけるサーバー

発生している問題

Fiddlerを用いてJEPG画像をPOSTしたところ、サーバー側で受信し、JPEG形式のファイルを出力させることができました。
しかし、いざJPEG画像を開くと「サポートされていない」とでてしまい、ファイル自体は0KBでもないのですが、開くことができません。

写真ビューワーで表示

Textに出力させたところ沢山の文字列が入ってたため何かしら出力されているものと思いますが、なぜ表示できないのかわかりません。

画像の出力をテキストファイル

該当のソースコード

Node.js

'use strict';

const fs = require('fs');
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => res.send('POSTでアップロードしてください。'));

app.post('/', (req, res) => {
    let buffers = [];
    let cnt = 0;

    req.on('data', (chunk) => {
        buffers.push(chunk);
        console.log(++cnt);
    });

    req.on('end', () => {
        console.log(`[done] Image upload`);
        req.rawBody = Buffer.concat(buffers);
        //書き込み
        fs.writeFile('./img.jpg', req.rawBody, 'utf-8',(err) => {
            if(err) return;
            console.log(`[done] Image save`);
        });
    });
});

app.listen(PORT);

試したこと

様々なJEPG画像で試しましたが、出力されるファイルのKBが変わるため送信はできていると思います。

補足情報(FW/ツールのバージョンなど)

環境は
Windows 10
Node.js v6.11.5
Powershell
を使用しています。

他にも画像をアップロードする方法をご存知でしたらご教授願いたいです。
また、そもそも画像をアップロード自体、Node.jsではしない等あれば、Webアプリケーションでは通常どのような手法が用いられるのかも教えていただきたいです。

1 件の回答 1

0

受信する方法と送信する方法がミスマッチしているのだと思います。

質問者さんは <input type=file name="fieldNameHere"> のようなフォームを multipart/form-data 形式で送っているようです。
参考にされたページのコードは、フォームではない手段でバイナリを直接リクエストボディに入れた場合のものです。

フォームで送信されたファイルを受け取るには、multer などを使うと簡単そうです。

let multer = require('multer')
let upload = multer({dest: './'})
...
app.post('/', upload.single('fieldNameHere'), (req, res) => {
  // req.file がアップロードされたファイルのメタデータ(ファイル内容そのものではない)
});
2

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。