[Vue]이미지 업로드 & 다운로드 구현하기

vue 파일 업로드 대표이미지

 

 

Vue 3를 활용하여 이미지 파일을 업로드하고 다운로드하는 기능을 구현하는 방법을 소개합니다.
Spring Boot를 사용한 서버 구축아래 포스트에서 확인하시면 됩니다.

2025.02.14 - [Spring]파일 업로드 하기

[Spring]파일 업로드 하기

 

 

---

1. 프로젝트 개요

이 프로젝트에서 구현할 기능은 다음과 같습니다.

✅ 이미지 업로드: 사용자가 이미지를 선택 후 서버로 업로드
✅ 이미지 조회: 사용자가 이미지 파일명을 입력하면 해당 이미지를 조회
✅ 이미지 다운로드: 입력한 이미지 파일을 서버에서 다운로드

📁 프로젝트 구조

프로젝트 구조

 

---

2. Vue 라우터 설정

Vue Router를 활용하여 업로드 페이지와 이미지 조회 페이지를 구성합니다.

📌 src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import ImageView from "@/views/ImageView.vue";
import UploadView from "@/views/UploadView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "upload",
      component: UploadView,
    },
    {
      path: "/view",
      name: "imageView",
      component: ImageView,
    },
  ],
});

export default router;

• / → 이미지 업로드 페이지
• /view → 이미지 확인 및 다운로드 페이지

---

3. 업로드 기능 구현

사용자가 파일을 선택한 후, 업로드 버튼을 클릭하면 서버로 파일을 업로드하는 기능을 구현합니다.

📌 src/views/UploadView.vue

<template>
  <div>
    <h2>이미지 업로드</h2>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <button @click="uploadFile">업로드</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const file = ref(null);

function handleFileChange(event) {
  file.value = event.target.files[0];
}

async function uploadFile() {
  if (file.value) {
    const formData = new FormData();
    formData.append("file", file.value);

    try {
      const response = await fetch("http://localhost:8080/api/files/upload", {
        method: "POST",
        body: formData,
      });

      if (response.ok) {
        alert("업로드 성공!");
      } else {
        alert("업로드 실패!");
      }
    } catch (error) {
      console.error("업로드 중 오류 발생:", error);
      alert("업로드 중 오류 발생!");
    }
  } else {
    alert("파일을 선택하세요.");
  }
}
</script>

📌 구현 내용

• 사용자가 파일을 선택하면 file 변수에 저장됩니다.
• uploadFile() 실행 시 FormData를 이용해 서버로 파일을 전송합니다.
• fetch()를 이용하여 POST 요청을 보내고, 성공 여부를 알림창으로 표시합니다.

---

4. 이미지 확인 및 다운로드 기능 구현

사용자가 이미지 파일명을 입력하면 해당 이미지를 불러와 미리보기할 수 있도록 하고, 다운로드 버튼을 클릭하면 파일을 다운로드할 수 있도록 합니다.

📌 src/views/ImageView.vue

<template>
  <div>
    <h2>이미지 조회 및 다운로드</h2>
    <input v-model="imageName" placeholder="이미지 이름을 입력하세요" />
    <button @click="checkImage">확인</button>
    <br />
    <img
      v-if="imageUrl"
      :src="imageUrl"
      alt="Uploaded Image"
      style="max-width: 300px; margin-top: 10px"
    />
    <br />
    <button v-if="imageUrl" @click="downloadImage">다운로드</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const imageName = ref("");
const imageUrl = ref(null);

function checkImage() {
  if (imageName.value.trim() !== "") {
    imageUrl.value = `http://localhost:8080/api/files/images/${imageName.value}`;
  } else {
    alert("이미지 이름을 입력해주세요");
  }
}

async function downloadImage() {
  if (imageUrl.value) {
    let element = document.createElement("a");
    element.setAttribute(
      "href",
      `http://localhost:8080/api/files/download/${imageName.value}`
    );
    element.click();
  }
}
</script>

📌 구현 내용

• 사용자가 입력한 이미지 파일명을 기반으로 미리보기 URL을 생성.
• 입력한 파일명을 기반으로 다운로드 API를 호출하여 이미지를 다운로드.

---

5. Vue 앱 설정 및 실행

📌 src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(router);

app.mount("#app");

📌 src/App.vue

<template>
  <div id="app">
    <nav>
      <RouterLink to="/">업로드 페이지</RouterLink> |
      <RouterLink to="/view">이미지 확인/다운로드 페이지</RouterLink>
    </nav>
    <hr />
    <RouterView />
  </div>
</template>

---

6. 실행 및 테스트

📌 프로젝트 실행

 

파일 업로드, 다운로드 테스트

 

 

실행 후, 아래와 같은 기능을 확인할 수 있습니다.

1️⃣ http://localhost:5173/ → 파일을 업로드
2️⃣ http://localhost:5173/view → 파일명을 입력하여 이미지 미리보기 및 다운로드

---

7. 정리

✅ 구현한 기능

✔ 파일 업로드 (FormData 사용)
✔ 이미지 미리보기 (입력한 파일명을 통해 이미지 URL 생성)
✔ 이미지 다운로드 (a 태그를 이용한 다운로드 링크 생성)