ファイルのアップロード(Express Validator 利用) - Express

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

  • 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 = "" }%>
  <div class="error-box">
    <% if(typeof errors !== 'undefined') { %>
      <% for(let error of errors){ %>
        <% if(error.path == "img"){ %>
          <p><%= error.msg %></p>
        <% } %>
      <% } %>
    <% } %>
  </div>
</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 { check, validationResult } = require('express-validator');

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


// バリデーションの指定
let validator = [
  check('img').custom((value, { req, res, next }) => {
    const obj = req.files.img;

    if(obj["size"] >= 5000){ 
      throw new Error('ファイルサイズが大きすぎます。');
    };
    return true;
  }),
  check('img').custom((value, { req, res, next }) => {
    const obj = req.files.img;
    
    let flag = false;
    if(obj["type"] == "image/jpg") { flag = true };
    if(obj["type"] == "image/png") { flag = true };

    if(obj["name"] == "" && flag == false ){
      throw new Error('ファイルが選択されていません。');
    } else if(!flag){
      throw new Error('PNG か JPEG 形式のファイルのみアップロードできます。');
    }
    return true;
  })
]

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

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

  if (!errors.isEmpty()) {
    // バリデーションエラーがあった場合の処理
    res.render('fileup/index', {errors: errors.array()});
    return;
  } else {
    // バリデーションエラーが無かった場合の処理
    if(obj["name"] != ""){
      const dest = path.dirname(obj.path).replace(/\\/g, "/") + "/" + obj.name;
      fs.renameSync(obj.path, 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(express.static('tmp'));

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

... 中略 ...