새소식

반응형
JavaScript/Vue

URL.createObjectURL(Blob)

  • -
반응형

URL.createObjectURL(Blob) 이란?

: Blob 객체(이미지, 동영상 등 대용량 바이너리 객체)를 가상의 URL을 부여하여 접근할수 있게 한다.

: 생성된 주소는 메모리에 올라가 있다.

: createObjectURL(Blob)을 사용한 브라우저가 종료될 경우 메모리에 올라간 가상 URL은 사라지게 된다.

예) Vue 환경

View

<template>

    <div v-for="(file, index) in pdf_files" :key="index" class="file-preview-wrapper">

        <div class="file-close-button" @click="fileDeleteButton(index)" :name="file.number">

            x

        </div>

        <img :src="file.preview"/>

    </div>

</template>

Javascript

methods: {

    imageUpload() {

        this.pdf_files = [

            {

                file: this.$refs.files.files[0],

                preview: URL.createObjectURL(this.$refs.files.files[0])

            }

        ]

    }

}

* Blob(Binary Large Objects)

대용량 바이너리 객체

이미지, 동영상 등 단순 텍스트 데이터가 아닌 바이너리 데이터를 담을 수 있는 객체이다.

바이너리 데이터를 다루기 위한 데이터 포맷 정도라고 생각하면 된다.

반응형

'JavaScript > Vue' 카테고리의 다른 글

Vue Store(Vuex) - Getters  (0) 2021.10.27
네비게이션 가드  (0) 2021.10.27
Vue Store(Vuex) - State  (0) 2021.10.25
v-if, v-for, v-show, v-bind, v-on, v-model  (0) 2021.10.25
Vue 프로젝트 생성하기  (0) 2021.10.25
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.