일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- State
- 자바스크립트
- Vue
- Vue.js
- vuex
- webpack
- Wecode
- JavaScript
- event
- mapGetters
- MySQL
- 리액트
- input
- sass
- jsx
- scss
- v-html
- CSS
- ES6
- Vue transition
- HOC
- express
- 자료구조
- 댓글달기
- nodejs
- storybook
- App.vue
- TypeScript
- react
- 쉬운설명
- Today
- Total
익명의 개발노트
[vue.js] URL.createObjectURL 을 이용한 이미지 처리 본문
우선 설명하기전에 Blob에 대해서 설명하고 넘어가려 한다.
Blob: Binary Large Object의 줄임말로 써 이미지, 사운드 파일 같이 하나의 큰 파일을 의미하며,
이런 파일들은 특별한 방법으로 다루어야하며, 멀티미디어 객체들을 저장하기 위해 주로 사용한다. (Blob객체 참고)
<input type='file'>은 .files라는 것을 가지고, files는 File 객체(new File())의 콜렉션이다.
그리고 File객체는 Bolb를 확장해서 만들어 진 것이며, Blob를 쓸 수 있는 곳이면 File도 사용할 수 있다.
* 모든 DBMS가 BLOB를 지원하지는 않음.
input type="file" 로 이미지 미리보기 기능 구현시
reader 객체를 써서하는 dataURL방법과 URL 객체인 createObjectURL을 이용하는 방법이 있다.
dataUrl을 이용하면 값을 아래와 같은 값으로 받아온다. (* 기존 제 블로그 이미지 업로드 참고)
DataURL은 문자열이며, 그 문자열을 풀어서 아래와 같이 긴 내용으로 만들어 사용하며,
img src에 적용할 때 마다 문자열을 파싱해서 이미지로 만드는 작업을 하기(만들어진 객체 공유 안하며, 새로 만듦)
때문에 속도측면에서 느리다.
"data:image/jpeg;base64,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"
반면, createObjectURL을 활용하면 아래와 같이 blob객체의 url주소값으로 이미지를 불러 올 수 있다.
이렇게 생성된 주소는 메모리에 올라가 있기 때문에(Blob 객체를 바라봄)
객체를 새로 만들 필요없이 바로 가져다 쓰기때문에 속도측면에서도 빠르다.
아래 생성된 주소는 실제 서버에는 존재하지 않고, 해당 브라우저에서만 사용 가능한 URL이다.(브라우저 내에서만 사용하기 위한 URL)
<template>
<div class="itemFileBox" ref="itemFileBox">
<input type="file"
class="item-file-image"
id="uploadItemFile"
ref="uploadItemFile"
@change="onFileSelected"
accept="image/*"
/>
<label for="uploadItemFile">
<div class="wrapper-image" >
<img ref="uploadItemImage">
</div>
</label>
</div>
</template>
onFileSelected(event){
let image = event.target;
if(image.files[0]){
let itemImage = this.$refs.uploadItemImage; //img dom 접근
itemImage.src = window.URL.createObjectURL(image.files[0]);//img src에 blob주소 변환
this.itemImageInfo.uploadImages = itemImage.src; //이미지 주소 data 변수에 바인딩해서 나타내게 처리
itemImage.width ='200'; // 이미지 넓이
itemImage.onload = () => {
window.URL.revokeObjectURL(this.src) //나중에 반드시 해제해주어야 메모리 누수가 안생김.
}
}
}
'코딩일기 > TIL' 카테고리의 다른 글
[vue.js] v-tooltip 사용하기 (0) | 2020.06.03 |
---|---|
[vue.js] input 창 한글입력 바인딩 처리 (0) | 2020.05.13 |
[vue.js] mapGetters 관한 꿀팁 (0) | 2020.04.29 |
[vue.js] How to preview multiple images before upload? (0) | 2020.04.22 |
[vue.js] vuedraggable.js로 드래그 구현하기 (0) | 2020.04.16 |