【Node.js】ファイルをアップロードしよう！【Express】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Node.jsの解説シリーズです。

今回はファイルをアップロードする方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

Node.jsでファイルアップロードができる

本記事ではTypeScriptで記述するよ！

ファイルをアップロードしよう！
1. multer
サンプルコード
1. フロントエンド
2. バックエンド
まとめ

ファイルをアップロードしよう！

フロントエンドからhttp通信でファイルを送信
Expressでファイルを受け取る
所定のフォルダにファイルを格納する

という想定で作ります。

フロントエンドはAngularで記述してるよ！

multer

Node.jsアプリケーションでファイルをアップロードするには
multerというミドルウェアライブラリを使用します

ファイルの受け渡しができるミドルウェアでファイルの種類やサイズの制限をかけることもできるよ！

サンプルコード

フロントエンド


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
  constructor(private http: HttpClient) { }

  /**
   * ファイルをアップロードするメソッド
   * @param {File} file - アップロードするファイル
   * @returns {Promise} - アップロードの結果を表すPromise
   */
  uploadFile(file: File): Promise {
    const formData: FormData = new FormData();
    formData.append('file', file);

    // サーバーにファイルをPOSTリクエストでアップロード
    return this.http.post('/upload', formData);
  }
}

バックエンド

const express = require('express');
const multer = require('multer');
const fs = require('fs'); // ファイルシステムモジュールを追加
const app = express();

// ファイルをアップロードするためのmulterミドルウェアを設定
const storage = multer.diskStorage({
  destination: '/my-directory/', // ファイルの保存先ディレクトリ
  filename: (req, file, callBack) => {
    callBack(null, file.originalname); // ファイル名をそのまま使う例
  }
});

const upload = multer({
  storage,
  limits: { fileSize: 1024 * 1024 * 10 }, // 10 MBまでのファイルを許可
});


// ファイルを受け取り、フォルダを作成するエンドポイント
app.post('/upload', upload.single('file'), (req, res) => {
  // ファイルの受け取りが完了したことをクライアントに応答
  res.status(200).json({ message: 'ファイルを受け取りました' });
  
  const folderPath = '/my-directory/';
  // フォルダが存在しない場合は作成
  if (!fs.existsSync(folderPath)) {
    fs.mkdirSync(folderPath, { recursive: true }); // フォルダを再帰的に作成
  }
});

// Expressアプリを起動
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

fsも併用することで同時にフォルダの作成もできるよ！

まとめ

fileのアップロードにはmulterを使用する

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram