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

Vue.jsでフォームを扱う際、画像やPDFなどのファイルをサーバーへアップロードする機能は非常に重要です。特に業務アプリや管理画面では、ユーザーが添付ファイルを登録できるインターフェースが求められます。この記事では、Axiosを使ってファイルをアップロードする基本的な手順を紹介します。

実装の流れ
テンプレート部分の記述
スクリプト部分（Composition API）
バックエンド側の受け取り例（Node.js/Express）
複数ファイル対応にするには
まとめ

実装の流れ

Vue.jsでファイルをアップロードする基本的なステップは以下の通りです：

<input type=”file”>でファイルを選択
選択したファイルをFormDataで送信形式に変換
Axiosを使ってPOSTリクエストでサーバーへ送信

テンプレート部分の記述

<template>
  <form @submit.prevent="handleUpload">
    <input type="file" @change="onFileChange" />
    <button type="submit">アップロード</button>
  </form>

  <p v-if="uploadSuccess">アップロード成功！</p>
</template>

スクリプト部分（Composition API）

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

const selectedFile = ref(null)
const uploadSuccess = ref(false)

const onFileChange = (event) => {
  selectedFile.value = event.target.files[0]
}

const handleUpload = async () => {
  if (!selectedFile.value) return

  const formData = new FormData()
  formData.append('file', selectedFile.value)

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    console.log('アップロード成功', response.data)
    uploadSuccess.value = true
  } catch (error) {
    console.error('アップロード失敗', error)
    uploadSuccess.value = false
  }
}
</script>

バックエンド側の受け取り例（Node.js/Express）

参考までに、Node.js + Express で受け取る側のサンプルです。multerを使ってファイルを処理します。

const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
const app = express()

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.send({ status: 'success' })
})

複数ファイル対応にするには

複数ファイルを選択できるようにする場合は、以下のように変更します：

<input type="file" multiple @change="onFilesChange" />

const onFilesChange = (event) => {
  const files = event.target.files
  for (let i = 0; i < files.length; i++) {
    formData.append('files[]', files[i])
  }
}