Reactとmulterとexpressを使って画像をアップロードしたい

前提・実現したいこと

Reactとmulterとexpressを使って画像をアップロードしたいのですが、以下のようなエラーが発生します。

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

エラーメッセージです。

TypeError: Cannot read property 'originalname' of undefined

変数の未定義とかではなく「originalname」のスペルミスをしているわけでもなく、おそらく画像がpostできていないのだと思います。。。

該当のソースコード

「http://localhost:3001/upload」にアクセスした場合は、React Routerによって以下のコンポーネントを描画します。
ファイルをPOSTするためのフォームを描画するのみとなっています。
upload.js

javascript
1import React, {Component} from 'react'
2import request from 'superagent'
3
4// 
5export default class Upload extends Component {
6        return (
7　　　　　<div>
8           <h1>プロフィール編集</h1>
9          <form method="POST" action="/upload" enctype="multipart/form-data">
10          <input type="file" id="image" name="aFile" /><br />
11          <input type="submit" value="アップロードするよ" />
12          </form>
13          </div>
14        )
15      }
16}

expressを使って、フォームからPOSTされた画像をmulterを使って取得するコードです。
server.js

javascript
1const multer = require('multer')
2const path = require('path')
3const storage = multer.diskStorage({
4  // ファイルの保存先を指定
5  destination: (req, file, cb) => {
6    cb(null,pubDir);
7  },
8  // ファイル名を指定(オリジナルのファイル名を指定)
9  filename: (req, file, cb) => {
10    cb(null, file.originalname);
11  }
12});
13
14const uploader = multer({dest: tmpDir,storage:storage})
15
16app.post('/upload', uploader.single('aFile'), (req, res) => {
17する
18  console.log('オリジナルファイル名:', req.file.originalname)
19})

試したこと

もし上記の2つ目(server.js)のサーバーとなるコードの中で、以下のようにsend()を使って直接formタグを書いたら、うまくアップロードされます

javascript
1app.get('/upload', (req, res) => {
2  res.send(
3    '<h1>プロフィール画像編集</h1>' +
4    '<form method="POST" action="/" enctype="multipart/form-data">' +
5    '<input type="file" name="aFile" /><br />' +
6    '<input type="submit" value="アップロード" />' +
7    '</form>')
8})