質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

5448閲覧

Multerを使って、Node.js/Expressでの画像ファイルのアップロードが出来ない

twipg

総合スコア30

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2015/06/02 13:43

Node.js/ExpressでMulterというミドルウェアを使用して、画像ファイルをアップロードしようとしています。

Chrome拡張のDHCを使用してPOSTメソッドのmultipart/form-dataで画像ファイルの送信テストをしています。

ところが、req.filesとreq.bodyをconsole.logで表示させようとすると、両方とも空の状態({})になっています。当然、アップロード先のフォルダであるuploadsにも画像ファイルがアップロードされていません。

どうしたら、ファイルのアップロードが出来るようになるのでしょうか?

ソースコードなどは、以下です。

app.js

var express = require('express');
var multer = require('multer');

var app = express();
app.use(multer({ dest: './uploads/'}));

app.post('/', function(req, res){
console.log(req.body);
console.log(req.files);
res.status(204).end();
});

package.json

{
"name": "test_multer",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.12.2",
"multer": "0.1.6"
}
}

サーバーのログ

test_multer@0.0.0 start /Users/xxxxxx/test_multer
node ./bin/www

{}
{}
POST / 204 29.988 ms - -

DHC

POSTメソッド

HEADERS
http://127.0.0.1:3000

BODY(file)
test.jpeg
image/jpeg, 29 kbytes

リクエストとレスポンスの結果

POST / HTTP/1.1
Host: 127.0.0.1:3000
Content-Type: multipart/form-data; boundary=hogehoge
Content-Length: 29857

[message-body; type:image/jpeg, size:29857 bytes]

HTTP/1.1 204 No Content
X-Powered-By: Express
Date: Tue, 02 Jun 2015 13:21:09 GMT
Connection: keep-alive

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

結局、DHCでは出来ませんでした。

ただし、Webページからの送信テストではアップロード出来ました。

下記ソースで、テストを行ったところ、console.log(req.files)の表示が出来ました。
(jadeで書いてます)
※console.log(req.body)の方はそもそも送っていなかったので、これは空でも特に問題ありませんでした

lang

1form(method="post", enctype="multipart/form-data", action="/upload") 2 p ID: 3 input(type='text', name="Id") 4 input(type="file", name="upload_image") 5 input(type="submit")

DHCではnameの部分が足りなかったのかと推測します。
(同じようなChrome拡張のpostmanでもダメでした)

いずれにせよ、どのような方法であれアップロードが出来れば良かったので、自己解決としました。

投稿2015/06/06 00:29

編集2015/06/06 00:30
twipg

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問