Re:Vue

ファイルアップロード


muterの利用


1. はじめに

muterを使って、Express.jsのファイルアップロードのやり方を学ぶ。


2. expressでインストール

npm install multer

3. express.jsのプロジェクトディレクトリのindex.ts

muterをインストールしたのち、下記のuploadメソッドにあるようにmuterでストレージをしたり、ルーティングをセットする(post)ことで、簡単にアップロードすることが出来る。それと、storageメソッドにあるmulter.diskStorageでファイル名を設定したり、アップロードしたいパスを指定したり出来る。

import express from 'express'
const app: express.Express = express()
import multer from "multer";


//file
const storage = multer.diskStorage({
  destination(req, file, callback) {
    console.log(__dirname);
    callback(null, path.resolve(__dirname, "【パス名】"));
  },
  filename(req, file, callback) {
    const uniqueSuffix = Math.random().toString(26).substring(4, 10);
    callback(null, `${Date.now()}-${uniqueSuffix}-${file.originalname}`);
  },
});

const upload = multer({
  storage: storage
}).any()

app.post('/image', (req: any, res) => {
  upload(req, res, (err) => {
    if (err) {
      console.log(err);
      //アップロード失敗した場合
      res.json({
        status: "error",
        error: "fail to uplord image"
      })
    } else {
      //アップロード成功した場合
      res.json({
        status: "success",
        filename: req.files[0].filename,
        message: "ファイルアップロードに成功しました"
      })
    }
  })
});

//publicフォルダの設定
app.use("/static", express.static(path.join(__dirname, 'public')));

//アプリ起動
app.listen(3001, () => {
  console.log("Start on port 3001.")
})

module.exports = upload;

4. おわりに

muter理解すれば簡単だなと思った。


参考(最終閲覧日 2023/01/29):