teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Reactとmulterとexpressを使って画像をアップロードしたい

編集履歴

質問編集履歴

16

追記

2019/03/17 05:07

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ```
16
16
 
17
- 「originalname」のスペルミスをしているわけではなく、おそらく画像がpostできていないのだと思います。。。
17
+ 変数の未定義とかではなく「originalname」のスペルミスをしているわけでもなく、おそらく画像がpostできていないのだと思います。。。
18
18
 
19
19
 
20
20
 

15

追記

2019/03/17 05:07

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -134,7 +134,7 @@
134
134
 
135
135
  ```
136
136
 
137
- もちろん、上記のようなformタグが書かれたhtmlファイルからならpostに成功します。
137
+ もちろん、上記のようなformタグが書かれたhtmlファイルによるフォームから送信したらpostが成功します。
138
138
 
139
139
 
140
140
 

14

追記

2019/03/17 04:51

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -134,6 +134,8 @@
134
134
 
135
135
  ```
136
136
 
137
+ もちろん、上記のようなformタグが書かれたhtmlファイルからならpostに成功します。
138
+
137
139
 
138
140
 
139
141
  しかし、今回はどうしても**upload.js**のReactのコンポーネントの中のreturn()の中でformタグを書いて処理がしたいのです。

13

プログラム修正

2019/03/17 04:50

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -72,8 +72,6 @@
72
72
 
73
73
  const path = require('path')
74
74
 
75
- const uploader = multer({dest: tmpDir,storage:storage})
76
-
77
75
  const storage = multer.diskStorage({
78
76
 
79
77
  // ファイルの保存先を指定
@@ -93,6 +91,10 @@
93
91
  }
94
92
 
95
93
  });
94
+
95
+
96
+
97
+ const uploader = multer({dest: tmpDir,storage:storage})
96
98
 
97
99
 
98
100
 

12

プログラム追記

2019/03/17 04:48

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -68,6 +68,34 @@
68
68
 
69
69
  ```javascript
70
70
 
71
+ const multer = require('multer')
72
+
73
+ const path = require('path')
74
+
75
+ const uploader = multer({dest: tmpDir,storage:storage})
76
+
77
+ const storage = multer.diskStorage({
78
+
79
+ // ファイルの保存先を指定
80
+
81
+ destination: (req, file, cb) => {
82
+
83
+ cb(null,pubDir);
84
+
85
+ },
86
+
87
+ // ファイル名を指定(オリジナルのファイル名を指定)
88
+
89
+ filename: (req, file, cb) => {
90
+
91
+ cb(null, file.originalname);
92
+
93
+ }
94
+
95
+ });
96
+
97
+
98
+
71
99
  app.post('/upload', uploader.single('aFile'), (req, res) => {
72
100
 
73
101
  する

11

2019/03/17 04:46

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  </form>
54
54
 
55
- </div>んｐ
55
+ </div>
56
56
 
57
57
  )
58
58
 

10

2019/03/17 04:23

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  ### 試したこと
84
84
 
85
- もし上記の2つ目(server.js)のサーバーとなるコードの中で、以下のようにsend()を使って直接formタグを書いたら、うまくアップロードされます
85
+ もし上記の2つ目(**server.js**)のサーバーとなるコードの中で、以下のようにsend()を使って直接formタグを書いたら、うまくアップロードされます
86
86
 
87
87
  ```javascript
88
88
 

9

2019/03/17 04:18

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -106,7 +106,7 @@
106
106
 
107
107
 
108
108
 
109
- しかし、今回はどうしてもupload.jsのReactのコンポーネントの中のreturn()の中でformタグを書いて処理がしたいのです。
109
+ しかし、今回はどうしても**upload.js**のReactのコンポーネントの中のreturn()の中でformタグを書いて処理がしたいのです。
110
110
 
111
111
 
112
112
 

8

2019/03/17 04:17

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -106,7 +106,7 @@
106
106
 
107
107
 
108
108
 
109
- しかし、今回はどうしてもReactのコンポーネントの中のreturn()の中でformタグを書いて処理がしたいのです。
109
+ しかし、今回はどうしてもupload.jsのReactのコンポーネントの中のreturn()の中でformタグを書いて処理がしたいのです。
110
110
 
111
111
 
112
112
 

7

2019/03/17 04:16

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -23,6 +23,8 @@
23
23
  「http://localhost:3001/upload」にアクセスした場合は、React Routerによって以下のコンポーネントを描画します。
24
24
 
25
25
  ファイルをPOSTするためのフォームを描画するのみとなっています。
26
+
27
+ **upload.js**
26
28
 
27
29
  ```javascript
28
30
 
@@ -62,6 +64,8 @@
62
64
 
63
65
  expressを使って、フォームからPOSTされた画像をmulterを使って取得するコードです。
64
66
 
67
+ **server.js**
68
+
65
69
  ```javascript
66
70
 
67
71
  app.post('/upload', uploader.single('aFile'), (req, res) => {
@@ -78,7 +82,7 @@
78
82
 
79
83
  ### 試したこと
80
84
 
81
- もし上記の2つ目のサーバーとなるコードの中で、以下のようにsend()を使って直接formタグを書いたら、うまくアップロードされます
85
+ もし上記の2つ目(server.js)のサーバーとなるコードの中で、以下のようにsend()を使って直接formタグを書いたら、うまくアップロードされます
82
86
 
83
87
  ```javascript
84
88
 

6

2019/03/17 02:53

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -35,10 +35,6 @@
35
35
  //
36
36
 
37
37
  export default class Upload extends Component {
38
-
39
- // クリックイベントを指定
40
-
41
- //onClickのところに関数オブジェクトを指定して呼び出し
42
38
 
43
39
  return (
44
40
 

5

2019/03/17 02:50

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -21,6 +21,8 @@
21
21
  ### 該当のソースコード
22
22
 
23
23
  「http://localhost:3001/upload」にアクセスした場合は、React Routerによって以下のコンポーネントを描画します。
24
+
25
+ ファイルをPOSTするためのフォームを描画するのみとなっています。
24
26
 
25
27
  ```javascript
26
28
 

4

エラーに関する修正

2019/03/16 13:10

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ```
16
16
 
17
- おそらく画像がpostできていないのだと思います。。。
17
+ 「originalname」のスペルミスをしているわけではなく、おそらく画像がpostできていないのだと思います。。。
18
18
 
19
19
 
20
20
 

3

URL修正

2019/03/16 12:29

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
  また、このサイト
112
112
 
113
- [リンク内容](http://mk.hatenablog.com/entry/2015/11/06/125133)
113
+ [http://mk.hatenablog.com/entry/2015/11/06/125133](http://mk.hatenablog.com/entry/2015/11/06/125133)
114
114
 
115
115
  を参考にして、SuperAgentを使ってpostしたりしてみたのですが、だめでした。
116
116
 

2

URLをクリック可

2019/03/16 12:28

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
  また、このサイト
112
112
 
113
- http://mk.hatenablog.com/entry/2015/11/06/125133
113
+ [リンク内容](http://mk.hatenablog.com/entry/2015/11/06/125133)
114
114
 
115
115
  を参考にして、SuperAgentを使ってpostしたりしてみたのですが、だめでした。
116
116
 

1

追記

2019/03/16 12:27

投稿

kouki_1997
kouki_1997

スコア10

test CHANGED
File without changes
test CHANGED
@@ -62,7 +62,7 @@
62
62
 
63
63
  ```
64
64
 
65
- フォームからPOSTされた画像をmulterを使って取得するコード
65
+ expressを使って、フォームからPOSTされた画像をmulterを使って取得するコードです。
66
66
 
67
67
  ```javascript
68
68