🔒 문제 상황

게시판에 작성자가 업로드한 첨부파일을 다운로드 받아보자. (필요한 라이브러리 axios)

🔑 문제 해결

main.js

import axios from "axios"
app.config.globalProperties.$axios = axios

src > View.vue

<template>
  <div @click="download"/>다운로드<div>
</template>
<script>
  export default {
	method: {
      download(){
        this.$axios({
          // 이미지 url
          url: "https://images.unsplash.com/photo-1682102230567-25fa2595d9b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80", 
          method: "GET",
          responseType: "blob",
        }).then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', "undefined.jpg") 
          // undefined.jpg => 다운 받았을 때 파일 이름 및 확장자
          document.body.appendChild(link)
          link.click()
        }).catch((e) => {
          console.log(e)
        })
      },
    }
  }
</script>
<style></style>

📌 TIP

• 그냥 로컬에 있는 이미지를 다운받을 때는 axios를 사용할 필요는 없다.

	<!-- <a href="로컬 상대경로" download="저장될 때 파일이름과 확장자">다운</a> --> 
	<a href="/img/img.jpg" download="undefined.jpg">다운</a> 
	<!-- undefined.jpg 로 파일이 다운로드 된다. -->

• a 태그의 download 속성으로도 손쉽게 파일을 다운로드 할 수 있지만 다운받으려는 이미지가 서버에 있을 때는 다운로드 받아지지 않고 그냥 브라우저에 띄어지기만 한다..

• 만약 axios blob 를 사용했을 때 CORS ERROR 가 발생한다면 백엔드 쪽에서 설정을 해줘야한다!