0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

クライアント(HTML)からサーバー(Node.js+Express+Multer)へファイルをアップロードする方法

Last updated at Posted at 2023-05-31

クライアント(HTML)からサーバ(Node.js+Express+Multer)へファイルをアップロードするコードを紹介いたします。
他のネット記事にも様々な情報が記載されておりましたが、どれも一発で完璧に動作するコードがなかったので、これを機に完全版としてQiitaに公開しておこうかと思います。
参考にさせて頂いたネット記事を書かれた様々な方々にこの場を借りて感謝致します。

クライアントサイド(HTMLコード)

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ファイルのアップロード</title>
</head>
<body>
    <form id="form1" method="POST" enctype="multipart/form-data" action="http://localhost:3000/single">
        <fieldset class="form-group">
            <label for="file1">アップロードファイル (1)</label>
            <input type="file" id="file1" name="file1" class="form-control" />
        </fieldset>
        <fieldset class="form-group">
            <input type="submit" id="submitButton" name="submitButton" class="btn btn-primary" value=" 送信 " />
        </fieldset>
    </form>
</body>
</html>

サーバーサイド(Node.js+Express+Multerを使ったJavaScriptコード)

事前に必要なモジュールはnpmコマンドでインストールしておいてください。
アップロード先はindex.jsのあるフォルダ(ディレクトリ)下のtmpフォルダ(ディレクトリ)です。
あらかじめ、tmpフォルダ(ディレクトリ)自体は作成しておいてください。

index.js
const multer = require('multer');
const express = require('express');
const app = express();

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'tmp/')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
  })
  
const upload = multer({ storage: storage })

app.post('/single', upload.single('file1'), (req, res) => {
    console.log("{message:'アップロード成功'}");
});

app.listen(3000);

サーバの起動の仕方は以下のコマンドで。

node index.js

HTML画面

クライアントサイドのindex.htmlをブラウザで表示させ、ファイルを選択して送信ボタンを押せば、サーバ側のtmpフォルダ(ディレクトリ)下にファイルがアップロードされます。
アップロード画面.png

あとがき

結構、ネット検索して様々な記事を調べましたが、なかなか動作せず、苦労致しました。コードは応用が利くように最小限に留めました。この記事を見て、皆様のお役に立てれば幸いです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?