ファイルのアップロード - Express

ファイルのアップロードをするには

Express でファイルのアップロードをするには、FormData を処理してくれるミドルウェアを追加してやる必要があります。

ミドルウェアには、multer などありますが、ここでは、express-form-data を使います。

インストール

npm install express-form-data

単一ファイルのアップロード

単一ファイルのディレクトリへのアップロードは次のようにします。

ファイルをアップロードするディレクトリを「 upload 」という名前で作成します。

  • example
    • ...
    • routes
      • fileup.js
    • upload
    • views
      • fileup
        • index.ejs
    • app.js
    • ...

views/fileup/index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>file</h1>
  <form id="form" method="POST" enctype="multipart/form-data" action="/fileup">
    <p><input type="file" name="img" /></p>
    <p><input type="submit" value=" 送信 " /></p>
  </form>
  <% if (typeof message === 'undefined') { message = "" }%>
  <% if(Array.isArray(message)){ %>
    <ul>
    <% for(let i of message){ %>
      <li><%= i %></li>
    <% } %>
  </ul>
  <% } else { %>
    <p><%= message %></p>
  <% } %>
  
</body>
</html>

routes/fileup.js

var express = require('express');
var router = express.Router();
const path = require('path');
const formData = require('express-form-data');
const fs = require('fs');

const updir = path.dirname(__dirname).replace(/\\/g, "/") + "/upload"; // アップロード先のフォルダ
router.use(formData.parse({uploadDir:updir, autoClean:true}));

function fileCheck(obj){
  return new Promise((resolve, reject) => {
    let error = []
    console.log(obj)
    let flag = false;
    if(obj["type"] == "image/jpg") { flag = true };
    if(obj["type"] == "image/png") { flag = true };

    if(!flag){error.push("PNG か JPEG 形式のみです。")};
    if(obj["size"] >= 5000000){ error.push("ファイルサイズが大きいです。") };

    if(error.length <= 0){
      resolve(obj);
    } else {
      reject(error)
    }
  });
}

router.get('/', function(req, res, next) {
  res.render('fileup/index');
});

router.post('/', function(req, res, next) {
  const obj = req.files.img;

  fileCheck(obj).then((value) => {
    const dest = path.dirname(obj.path).replace(/\\/g, "/") + "/" + obj.name;
    fs.renameSync(obj.path, dest);  // 一時ファイル名を元のファイル名に変更する。
    res.render('fileup/index', {message: "アップロードされました。"});
  }).catch((error) => {
    console.log(error);
    res.render('fileup/index', {message: error});
  })
});

module.exports = router;

app.js

// + を追記

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var fileupRouter = require('./routes/fileup'); // +

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static('tmp'));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/fileup', fileupRouter); // +

... 中略 ...

ファイルの選択画面で画像のみ選択するには場合は、form の accept 属性を次のように指定します。

views/fileup/index.ejs

 <form id="form" method="POST" enctype="multipart/form-data" action="/fileup" accept="image/*">

複数ファイルのアップロード

複数のファイルをアップロードするには次のようにします。

ファイルをアップロードするディレクトリを「 upload 」という名前で作成します。

  • example
    • ...
    • routes
      • fileup.js
    • upload
    • views
      • fileup
        • index.ejs
    • app.js
    • ...

views/fileup/index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>file</h1>
  <form id="form" method="POST" enctype="multipart/form-data" action="/fileup" accept="image/*">
    <p><input type="file" name="img" multiple /></p>
    <p><input type="submit" value=" 送信 " /></p>
  </form>
  <% if (typeof message === 'undefined') { message = "" }%>
  <p class="message" id="message"><%= message %></p>
</body>
</html>

routes/fileup.js

var express = require('express');
var router = express.Router();
const path = require('path');
const formData = require('express-form-data');
const updir = path.dirname(__dirname).replace(/\\/g, "/") + "/upload"; // アップロード先のフォルダ
const fs = require('fs');
router.use(formData.parse({uploadDir:updir, autoClean:true}));

router.get('/', function(req, res, next) {
  res.render('fileup/index');
});

router.post('/', function(req, res, next) {
  if(Array.isArray(req.files.img)){
    const num = req.files.img.length;  // アップロードされたファイル数
    req.files.img.forEach((value) => {
      let src = value["path"].replace(/\\/g, "/");
      let dest = path.dirname(value["path"]).replace(/\\/g, "/") + "/" + value["name"];
      fs.renameSync(src, dest);  // 長い一時ファイル名から元の名前に変更とファイルの移動。
    });
    res.render('fileup/index', {message: num + " 個のファイルがアップロードされました。"});
  } else {
    let src = req.files.img.path.replace(/\\/g, "/");
    let dest = path.dirname(req.files.img.path).replace(/\\/g, "/") + "/" + req.files.img.name;
    fs.renameSync(src, dest);
    res.render('fileup/index', {message:" ファイルがアップロードされました。"});
  }
});

module.exports = router;

app.js

// + を追記

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var fileupRouter = require('./routes/fileup'); // +

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/fileup', fileupRouter); // +
... 中略 ...