[vue.js]서버없이 업로드한 이미지 다루기

스트링·2024년 4월 2일

instagram vue

vue 인스타그램

목록 보기

5/14

오늘은 이미지 업로드 하는 기능을 만들기 !

이미지를 업로드 하면 필터 선택하는 화면 띄우기!

그러니 이미지 업로드 버튼 만들어

ㅎㅎ

  <div class="footer">
    <ul class="footer-button-plus">
      <input type="file" id="file" class="inputfile"/>
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>

이런식으로 저 밑에 있는 + 버튼 누르면 파일 선택할수 있게 하는 버튼 생성!

근데 문제는 사진을 업로드 한걸 HTML에 보여주려면?

→ 이전 방법을 서버가 필요함, 이미지를 서버로 보내고 다시 유저한테 보내는 과정이 필요했다

→ 지금은 이미지 다루는 함수를 쓰면 댐ㅋ

두가지 방법이 있다.

FileReader()
URL.createObjectURL()

우리는 조금 더 가벼운 두번째 방법을 사용할거임

파일 업로드시 코드를 바로 실행하고 싶다면 다음과 같은 헨들러를 부착하면 된다.

  <div class="footer">
    <ul class="footer-button-plus">
      **<input @change="upload"** type="file" id="file" class="inputfile"/>
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>

이런식으로 하면댐 upload라는 함수로 따로 빼장ㅎㅎ

upload

 upload(e){
  let 파일 = e.target.filters
  console.log(파일)
 },

코드 설명 제공하신 코드 조각은 <input type="file"> 요소를 통해 업로드되는 파일의 이벤트를 처리하기 위한 Vue.js 구성 요소의 메서드인 것으로 보입니다. 그런데 코드에 오타가 있는 것 같습니다. 이를 분해하고 수정해 보겠습니다.
```
javascriptCopy code
upload(e){
  let file = e.target.filters
  console.log(file)
},
```
1. 업로드(e) {...}:
  - upload는 메소드 이름이며 이벤트가 트리거될 때 함수에 전달되는 이벤트 객체를 나타내는 하나의 매개변수 e를 사용합니다.
  - 이 메서드는 일반적으로 템플릿의 이벤트 리스너에 대한 응답으로 호출됩니다(예: <input type="file" @change="upload">).
2. let file = e.target.filters:
  - e.target은 이벤트를 트리거한 DOM 요소를 참조하며, 파일 업로드 컨텍스트에서는 <input type="file"> 요소가 됩니다.
  - .filters에 오타가 있는 것 같습니다. 업로드를 위해 선택한 파일에 액세스하려면 'e.target.files'를 사용해야 합니다.
  - files는 사용자가 선택한 파일 목록을 포함하는 FileList 개체입니다.
3. console.log(파일):
  - 이 줄은 'file' 변수를 콘솔에 기록합니다. file이 e.target.files에 올바르게 할당되면 선택한 파일 목록이 기록됩니다.
  
  수정된 코드는 다음과 같습니다.
```
javascriptCopy code
upload(e){
  let files = e.target.files; // This should be files, not filters
  console.log(files);
},
```
  수정 사항이 적용되면 사용자가 파일을 선택하면 'upload' 메서드가 FileList 개체를 콘솔에 기록합니다. 그런 다음 여러 파일 선택이 허용되는 경우 files[0], files[1] 등을 사용하여 각 파일에 액세스하거나 단일 파일의 경우 files[0]만 액세스할 수 있습니다.

파일을 업로드시 다음 코드가 실행됨

업로드한 파일이 실행

밑에 사진과 같이 다음과 같은 로그가 뜸!

 upload(e){
  let 파일 = e.target.filters
  console.log(파일[0])
 },
  }

만약 첫번째 파일만 원한다면 0번째같이 인덱싱을 해주면된다.

근디 업로드 후에는 필터 페이지로 넘어가야함…

추가적으로 업로드한 이미지를 화면에 띄워주는 작업도 해야한다

솔직히 페이지 넘어가는건 if문써서 하겠는데 띄워주는건 모르겟딩

알아보자

업로드 하는 순간 필터페이지로 넘기기

 upload(e){
  let 파일 = e.target.filters;
  console.log(파일[0]);
  this.step = 1;
 },

그냥 기존에 사용했던 step을 이용해 페이지를 넘기면 댄당

따로 함수에서 사용하는건 재정의가 필요하니 this. 잊지말기!

굿굿

업로드한 이미지 띄우기

근디 오류나서 나는 챗지피티 한테 물어봐서 코드 바꿈 ㅠㅠ

 upload(e){
  let 파일 = e.target.files; // Corrected from 'filters' to 'files'
  if (파일 && 파일.length > 0) {
    console.log(파일[0]); // This will log the first file object to the console
    this.step++;
  } else {
    console.error('No file selected');
  }
  let url = URL.createObjectURL(파일[0]);
  console.log(url);
},

두가지 방법이 있다.

FileReader() → 파일을 글자로 변환 및 압축
URL.createObjectURL() → 이미지의 가상 URL을 생성

2번째 방법 ㄱㄱ

이런식으로 가상의 URL을 생성해준다..

이제 그걸 background-image 속성으로 url 전달만 하면 끗남

Container 컴포넌트로 이동 ㄱㄱ

<!-- 필터선택페이지 -->
<div v-if="step == 1">
  <div class="upload-image" style="background-image: url();"></div>
  <div class="filters">
    <div class="filter-1"></div>
    <div class="filter-1"></div>
    <div class="filter-1"></div>
    <div class="filter-1"></div>
    <div class="filter-1"></div>
  </div>
</div>

실질적으로 보여지는 코드는 이미지 부분이다.

사실상 데이터 바인딩을 진행해야하는디…

근데 url이라는 데이터는 app.vue에서 가져와야함 ⇒ props 진행시켜 ㅋ

근디… 우리는 데이터에서 끌고 오는것만 해봤지..

upload(e){
  let 파일 = e.target.files; // Corrected from 'filters' to 'files'
  if (파일 && 파일.length > 0) {
    console.log(파일[0]); // This will log the first file object to the console
    this.step++;
  } else {
    console.error('No file selected');
  }
  let url = URL.createObjectURL(파일[0]);
  console.log(url);
},

이런식으로 JS코드로 따로 뺀 함수의 변수를 props 해본적은 한번도 없음..ㅠㅠ

→ 걍 데이터에 저장해.

오키..

  data(){
    return{ 
      게시물 : Postdata,
      더보기 : 0,
      step : 0,
      이미지 : '',
    }
  },

 upload(e){
  let 파일 = e.target.files; // Corrected from 'filters' to 'files'
  if (파일 && 파일.length > 0) {
    console.log(파일[0]); // This will log the first file object to the console
    this.이미지 = url;
    this.step++;
  } else {
    console.error('No file selected');
  }
  let url = URL.createObjectURL(파일[0]);
  console.log(url);
},

일단은 이미지라는 데이터를 빈 공간으로 생성해주고

this.이미지 = url;

이런식으로 코드를 작성해줘서 저장해주자..

이제 props로 전달 ㄱㄱ

쓰고 등록ㄱ

<Container :게시물="게시물" :step="step" :이미지="이미지" /> 
//app

  props : {
    게시물 : Array,
    step : Number,
    이미지 : String,
  }
  //container

<div class="upload-image" :style="`background-image:url(${이미지})`"></div>

그 다음 스트링으로 데이터 박아버리면댐

 upload(e) {
  let files = e.target.files;
  if (files && files.length > 0) {
    let file = files[0]; // First file object in the FileList
    console.log(file); // Log the file object to the console

    // Create a URL for the file
    let url = URL.createObjectURL(file);
    console.log(url); // Log the URL to the console

    // Update component data
    this.이미지 = url; // Assign the URL to the 이미지 data property
    this.step++; // Increment the step data property
  } else {
    console.error('No file selected');
  }
},

근디… 아까 수정한 코드 오류 나서 걍 지피티 돌려서 맞게 수정함

파일도 잘 올라가네요..

그리고 화면에 보이는 next 버튼을 클릭시 이미지 업로드 창으로 넘어가게 만들고 싶음

즉, step = 2 로 바뀌게 하면됨

그냥 똑같이 이벤트 리스너 달고 step=2로 바꿔주자

 <li @click="step = 2;">Next</li>

응응 메인 누르니 잘 넘어가네용ㅋ

추가적 지식

blob

근디 저기 blob이 뭐냐?

binary 데이터를 다룰때 BLOB 이라는 objct에 담아서 다룸

BLOB 이란 Binart Large Object임

Input 여러개 다루기

multiple 입력하면 여러개 받을수 있음

근데 제한을 두는게 좋음

이미지만 선택하게 이런식으로 accept, 사실 근본적인 해결방법은 아니고 보여주는것만 그런거임

<input @change="upload" accept="image/*"  type="file" id="file" class="inputfile"/>

자바스크립트 확장자로 검색해서 걸러야함

느낀점

동적인 UI는 정말 많이 사용되니 꼭 기억하자

데이터 생성후 @clike을 통해 화면 보이거나 안보이게 하기

스트링

PM과 서비스 기획자를 희망합니다.

이전 포스트

[vue.js]탭 만들기 & 탭으로 사진 업로드 페이지 만들기

다음 포스트