【Vue.js】ファイルアップロード機能の実装｜画像・PDFをサーバーに送信する方法

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import axios from 'axios'

const MAX_SIZE = 5 * 1024 * 1024                                  // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'application/pdf']

const inputRef = ref(null)
const files = ref([])         // 検証を通ったファイル
const previews = ref([])      // 画像のプレビュー { name, url }
const errors = ref([])
const message = ref('')
const uploading = ref(false)
const progress = ref(0)

function clearPreviews() {
  previews.value.forEach((p) => URL.revokeObjectURL(p.url))     // 作ったURLは、必ず解放する
  previews.value = []
}
onBeforeUnmount(clearPreviews)

// ファイルを選んだとき：クライアント側で、サイズと種類を確認する（あくまで補助）
function onFileChange(event) {
  const picked = Array.from(event.target.files)
  const valid = []
  errors.value = []
  message.value = ''

  for (const file of picked) {
    if (!ALLOWED_TYPES.includes(file.type)) {
      errors.value.push(`${file.name}：対応していない形式です`)
    } else if (file.size > MAX_SIZE) {
      errors.value.push(`${file.name}：5MBを超えています`)
    } else {
      valid.push(file)
    }
  }

  clearPreviews()
  files.value = valid
  previews.value = valid
    .filter((file) => file.type.startsWith('image/'))
    .map((file) => ({ name: file.name, url: URL.createObjectURL(file) }))
}

async function upload() {
  if (files.value.length === 0) {
    errors.value = ['アップロードするファイルを選んでください']
    return
  }

  // 送信する瞬間に FormData を作る。フィールド名 'files' は、サーバー側と揃える
  const formData = new FormData()
  for (const file of files.value) {
    formData.append('files', file)
  }

  uploading.value = true
  progress.value = 0
  errors.value = []
  message.value = ''

  try {
    // Content-Type は書かない。ブラウザが boundary 付きで自動設定する
    await axios.post('/api/upload', formData, {
      onUploadProgress: (event) => {
        if (event.total) progress.value = Math.round((event.loaded / event.total) * 100)
      }
    })
    message.value = 'アップロードしました'
    files.value = []
    clearPreviews()
    if (inputRef.value) inputRef.value.value = ''     // 選択状態を空に戻す
  } catch (e) {
    errors.value = [
      e.response
        ? `アップロードに失敗しました（${e.response.status}）`
        : '通信できませんでした。ネットワークを確認してください。'
    ]
  } finally {
    uploading.value = false
  }
}
</script>

<template>
  <form @submit.prevent="upload">
    <label for="file">画像・PDF（1ファイル5MBまで、複数選択できます）</label>
    <input
      id="file"
      ref="inputRef"
      type="file"
      multiple
      accept="image/jpeg,image/png,application/pdf"
      @change="onFileChange"
    >

    <ul v-if="errors.length" role="alert" class="errors">
      <li v-for="error in errors" :key="error">{{ error }}</li>
    </ul>

    <ul class="previews">
      <li v-for="preview in previews" :key="preview.url">
        <img :src="preview.url" :alt="preview.name" width="80">
      </li>
    </ul>

    <progress v-if="uploading" :value="progress" max="100">{{ progress }}%</progress>

    <button type="submit" :disabled="uploading">アップロード</button>
    <p role="status">{{ message }}</p>
  </form>
</template>

// fetch で FormData を送るとき
const response = await fetch('/api/upload', {
  method: 'POST',
  // NG：Content-Type を自分で指定してはいけない
  // headers: { 'Content-Type': 'multipart/form-data' },
  body: formData      // これだけでよい。ブラウザが boundary 付きの Content-Type を付ける
})

// server.js（Express + multer）
const express = require('express')
const multer = require('multer')
const path = require('path')
const crypto = require('crypto')

// 許可する種類と、保存するときの拡張子（元のファイル名の拡張子は信用しない）
const ALLOWED = { 'image/jpeg': '.jpg', 'image/png': '.png', 'application/pdf': '.pdf' }

const storage = multer.diskStorage({
  destination: '/var/app-uploads',                       // Web で公開されるディレクトリの外に置く
  filename: (req, file, cb) => {
    cb(null, crypto.randomUUID() + ALLOWED[file.mimetype])   // 名前は、サーバーが付け直す
  }
})

const upload = multer({
  storage,
  limits: { fileSize: 5 * 1024 * 1024, files: 5 },       // サイズと個数の上限
  fileFilter: (req, file, cb) => cb(null, file.mimetype in ALLOWED)   // 許可した種類だけ受け付ける
})

const app = express()

// 複数ファイル：フィールド名 'files'、最大5個（クライアントの formData.append('files', …) と一致させる）
app.post('/api/upload', upload.array('files', 5), (req, res) => {
  res.json({ count: req.files.length })
})