環境構築
1.以下を実行（もしくはexpress-file-uploadフォルダを作成してその中に移動）
mkdir express-file-upload
cd express-file-upload
2.package.json以下を作成して以下をコピペで記述
package.json
{
"name": "express-file-upload",
"version": "1.0.0",
"description": "",
"main": "server.js",
"type": "module",
"scripts": {
"start": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.2",
"express-fileupload": "^1.4.0",
"nodemon": "^2.0.20"
}
}
3.express-file-upload直下でnpm iを実行してpackage.jsonを元にモジュールをインストールする
npm i
フォルダ構成
server.jsviews/pages/form.ejs
の二つを作成
.
├── package-lock.json
├── package.json
├── server.js
└── views
└── pages
└── form.ejs
ソースコード
form.ejs
form.ejs
<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Image Upload</title>
</head>
<body>
<h1>画像アップロード</h1>
<form action="/upload" method="post" encType="multipart/form-data">
<p><input type="text" name="image-name" id=""></p>
<p><input type="file" name="image-file" id="" accept="image/*" multiple></p>
<input type="submit" value="送信">
</form>
</body>
</html>
server.ejs
server.js
"use strict";
import Express from "express";
import fileUpload from "express-fileupload";
import path from "path";
import { fileURLToPath } from "url";
const app = Express();
const port = 5050;
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
app.listen(port);
console.log(`http://localhost:${port}`);
app.set("view engine", "ejs");
// body-parserの設定
app.use(Express.json());
app.use(
Express.urlencoded({
extended: true,
})
);
// fileUploadの設定
app.use(fileUpload());
app.get("/", (req, res) => {
res.status(200).render("pages/form");
});
app.post("/upload", async (req, res) => {
try {
/**
* 画像アップロード
* @param {*} err
* @returns
*/
const imageUpload = function (err) {
if (err) return res.status(500).send(err);
console.log("File upload!!");
};
const file = req.files["image-file"];
const name = req.body["image-name"];
let savePath = [];
if (file.length) {
for await (const i of file) {
const path = __dirname + "/" + new Date().getTime() + i.name;
savePath.push(path); // 配列にpush
i.mv(path, imageUpload);
}
} else {
const path = __dirname + "/" + new Date().getTime() + file.name;
savePath.push(path); // 配列にpush
file.mv(path, imageUpload);
}
console.log(savePath); // これを文字列に変換してDBなどに保存
res.status(200)
} catch (error) {
// console.log(error);
res.status(500)
} finally {
res.redirect("/");
}
});
// 404の時
app.use((req, res, next) => {
// res.status(404).send("<h1>ページが見つかりません</h1>");
console.log('not found');
res.status(404).redirect('/')
});
app.use(fileUpload());とapp.post('/upload', ...からが大事
実行
npm run startを実行
npm run start
-
localhost:5050からフォーム画面を表示して画像のアップロードができる - 画像はフォルダではなく
express-file-upload直下に保存される -
multerを使いたくなかったのでmulterを使わないで済む方法を探してた