画像データをバイナリデータとして MySQL に保存(Express Validator 利用) - Express

データベース・テーブルの作成

使用したデータベースは、MySQL です。

データベースの作成

CREATE DATABASE sample;

テーブルの作成

CREATE TABLE img(
  id INT AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  img BLOB NOT NULL,
  PRIMARY KEY (id)
);

Node.js・パッケージのバージョン

Node v20.12.1
debug@2.6.9
ejs@3.1.9
express@4.19.2
cookie-parser@1.4.6
connect-flash@0.1.1
express-session@1.18.0
express-validator@7.0.1
express-form-data@2.0.23
mysql2@3.9.4

Express ファイル構成

example
- ...
- routes
  - fileup.js
- upload
- views
  - fileup
    - index.ejs
    - show.ejs
- app.js
- ...

/views/fileup/index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>fileup</title>
</head>
<body>
  <h1>fileup</h1>
  <p><a href="/fileup/show">fileup view</a></p>
  <form id="form" method="POST" enctype="multipart/form-data" action="/fileup">
    <p><input type="text" name="name"></p>
    <p><input type="file" name="img" /></p>
    <p><input type="submit" value=" 送信 " /></p>
  </form>
  <% if (typeof messages === 'undefined') { messages = "" }%>
  <% if(messages.success){ %>
    <div><%= messages.success %></div>
  <% } %>
  <div class="error-box">
    <ul>
      <% if(typeof errors !== 'undefined') { %>
        <% for(let error of errors){ %>
          <li><%= error.msg %></li>
        <% } %>
      <% } %>
    </ul>
  </div>
</body>
</html>

/views/fileup/show.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>fileup view</title>
  </head>
  <body>
    <h1>fileup view</h1>
    <% if(typeof data !== 'undefined') { %>
      <img src=<%= data %>>
    <% } %>
  </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 mysql = require('mysql2/promise');

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

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  database: 'sample',
  password: 'password',
});

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

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

    let flag = false;
    console.log(obj)
    if(obj["type"] == "image/jpeg") { 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;
  }),
  check('name').not().isEmpty().withMessage('名前を入力してください。'),
]

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;
  console.log(errors)
  if (!errors.isEmpty()) {
    // バリデーションエラーがあった場合の処理
    res.render('fileup/index', {errors: errors.array()});
    return;
  } else {
    // バリデーションエラーが無かった場合の処理
    if(obj["name"] != ""){
      (async () => {
        const dest = path.dirname(obj.path).replace(/\\/g, "/") + "/" + obj.name;
        fs.renameSync(obj.path, dest);  // 一時ファイル名を元のファイル名に変更する。
        let img = fs.readFileSync(dest); // 画像ファイルの読み込み

        try {
          const [results, fields] = await  pool.query('INSERT INTO img (name, img) VALUES (?, ?);', [req.body.name, img]);
          fs.unlinkSync(dest);
          req.flash("success", "アップロードできました。");
          res.redirect('/fileup/');
        } catch (err) {
          res.redirect('/fileup/');
        }
      })();
    }
  }
});

router.get('/show', function(req, res, next) {
  (async () => {
    try {
      const [results, fields] = await pool.query('SELECT * FROM img WHERE id = "2"');
      let data = `data:image/jpeg;base64,${results[0]["img"].toString('base64')}`
      res.render('fileup/show', { title: 'Express', data: data });
    } catch (err) {
      console.log(err);
      res.render('fileup/show');
    }
  })();
});

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');
const session = require('express-session'); // +
const flash = require('connect-flash'); // +

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(session({
  secret: 'secret_key',
  resave: false,
  saveUninitialized: false
}));

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(flash()); // +

 // +
app.use((req, res, next) => {
  res.locals.messages = req.flash();
  next(); 
});

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

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;