ChatGPT에게 물었습니다. Image Upload

7. ChatGPT에게 물었습니다.

그리고, ChatGPT가 시키는 대로 해 봤습니다.

0. Firebase 프로젝트 만들기:

우선 Firebase의 Storage를 이용하기 위해서는 Firebase 프로젝트를 만들고 앱을 등록하여야 합니다.
Firebase 콘솔 (https://console.firebase.google.com/?hl=ko) 에서 프로젝트를 만들고 앱을 등록하였다고 가정하고 진행합니다.

 

1. 새 Vue 프로젝트를 만듭니다.

 

vue create image-upload

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

 

2. 프로젝트 디렉토리로 이동

cd image-upload

 

 

 

3. Firebase 설치:

npm install firebase

 

4. configure Firebase:

src 디렉터리에 firebase.js라는 새 파일을 만들고 Firebase 구성을 추가합니다.

 

 

 

5. UploadImage.vue

 

src/comComponents 디렉터리에 UploadImage.vue라는 이름의 새 Vue 구성 요소를 만듭니다.

 

 

 

6. App.vue

 

메인 애플리케이션 파일(App.vue)에 UploadImage 구성 요소를 가져와 사용합니다.

 

 

 

7. 개발 서버에서 프로젝트 실행

 

npm run serve

 

브라우저를 열어 http://localhost:8080에 접속

파일 선택 클릭 -> 로컬 컴퓨터에서 이미지 파일 선택 -> ‘upload’ 클릭

 

 

8. 업로드된 이미지 확인

 

uploaded! File URL을 클릭하면 그림과 같이 업로드된 이미지를 볼 수 있습니다.

 

 

 

별다른 수정없이 시키는 대로 했습니다. 이미지 업로드가 정상 동작합니다.

9. Source

 

UploadImage.vue

<!-- src/components/UploadImage.vue -->
<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="uploadImage">Upload</button>
    <p v-if="uploading">Uploading...</p>
    <p v-if="downloadURL">Uploaded! File URL: <a :href="downloadURL">{{ downloadURL }}</a></p>
  </div>
</template>

<script>
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
import { storage } from '../firebase';

export default {
  data() {
    return {
      file: null,
      uploading: false,
      downloadURL: null
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async uploadImage() {
      if (this.file) {
        this.uploading = true;
        const storageRef = ref(storage, `images/${this.file.name}`);
        const uploadTask = uploadBytesResumable(storageRef, this.file);

        uploadTask.on('state_changed',
          (snapshot) => {
            // Observe state change events such as progress, pause, and resume
          },
          (error) => {
            console.error('Upload failed', error);
            this.uploading = false;
          },
          () => {
            // Handle successful uploads on complete
            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
              this.downloadURL = downloadURL;
              this.uploading = false;
            });
          }
        );
      }
    }
  }
};
</script>

 

 

App.vue

Copy<!-- src/App.vue -->
<template>
  <div id="app">
    <UploadImage />
  </div>
</template>

<script>
import UploadImage from './components/UploadImage.vue';

export default {
  components: {
    UploadImage
  }
};
</script>