65849


### 前提・実現したいこと

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

[Node.jsで画像アップロードを受けつけるサーバー](https://qiita.com/n0bisuke/items/12a1d0fed0f544269489)

### 発生している問題

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

[![写真ビューワーで表示](https://i.stack.imgur.com/qhSRv.png)](https://i.stack.imgur.com/qhSRv.png)

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

[![画像の出力をテキストファイル](https://i.stack.imgur.com/gvNCx.png)](https://i.stack.imgur.com/gvNCx.png)

### 該当のソースコード

Node.js

[code]

    '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);
    
[/code]

### 試したこと

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

### 補足情報（FW/ツールのバージョンなど）

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

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


CC BY-SA 4.0
2020-04-22T04:54:47.410
65846
2020-04-22T09:07:38.830
2020-04-22T05:34:13.407
3060
39762
question
node.js
Node.jsのwriteFileで出力したjpeg画像がサポートされていない形式になってしまっていて見ることができない。


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

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

フォームで送信されたファイルを受け取るには、[multer](https://github.com/expressjs/multer)
などを使うと簡単そうです。

[code]

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


CC BY-SA 4.0
2020-04-22T06:30:53.413
65849
2020-04-22T09:07:38.830
2020-04-22T09:07:38.830
3475
3475
65846
answer