소개

이전에는 Laravel + AWS S3를 사용하여 이미지 업로드 기능을 구현했습니다.
그 때, 프로파일 화상의 변경시에 화상의 프리뷰를 볼 수 있으면 좋겠다고 생각했으므로 이번은 프리뷰 기능을 실장해 갑니다.

모처럼이므로 Vue.js에서 구현하려고합니다. 아직 Vue.js는 거의 지식이 없기 때문에 공부하면서 구현합니다.

버전

・Laravel:7.20.0
· Vue.js 2.5.17

흐름

거친 흐름은 다음과 같습니다.

Vue 파일 만들기

처리 구현

구성 요소 등록

개발

먼저 미리보기용 Vue 파일을 만듭니다.
resources/js/components 아래에서 새로 만듭니다.

처리는 이쪽이 됩니다.

ImagePreviewComponent.vue

<template>
    <div>
        <div>
            <input type="file" name="avatar" ref="preview" v-on:change="show">
        </div>
        <div class="preview-box" v-if="url">
            <img class="image-preview" v-bind:src="url">
        </div>
    </div>
</template>

<script>
export default {
    name: "ProfileImagePreviewComponent",

    data() {
        return {
            url:""
        }
    },
    methods: {
        show() {
            const file = this.$refs.preview.files[0];
            this.url = URL.createObjectURL(file);
        }
    }
}
</script>

해설

<input type="file" name="avatar" ref="preview" v-on:change="show">

ref 속성을 설정함으로써, 설정한 요소(이번이면 input 요소)의 파일 정보를 동적으로 취득할 수 있다.

취득하고 싶은 요소에 ref 를 설정해, $refs 를 사용해 취득할 수 있다.
취득 방법으로서는, $refs.[ref属性で付けた名前] 그리고 그 요소에 액세스 할 수 있다.
이번에는, input 요소의 파일 정보를 취득하고 싶기 때문에 아래와 같이 기재한다.

methods: {
    show() {
        const file = this.$refs.preview.files[0];
        this.url = URL.createObjectURL(file);
    }
}

URL.createObjectURL()이란?

URL.createObjectURL() 정적 메소드는, 인수로 지정된 오브젝트를 나타내는 URL 를 포함한 DOMString 를 생성합니다. URL의 수명은, 그것을 작성한 윈도우내의 document 와 연결되어 있습니다. 새로운 객체 URL 는, 지정된 File 객체 또는 Blob 객체를 나타냅니다.
참고 : URL.createObjectURL()- MDN Web Docs

즉, 인수로 지정된 오브젝트의 임시 URL을 작성하는 처리입니다.
일시적이기 때문에, 다른 페이지로 천이하는 등 언로드하면 무효가 된다.

URL.createObjectURL()로 일시적인 URL을 생성해, img 태그로 표시시켜 주는 것으로 프리뷰 기능을 할 수 있다고 하는 것.

v-on 지시어에서 파일을 선택할 때 show() 메소드로 파일의 URL을 생성한다!

참고
· URL.createObjectURL() - 객체의 URL을 작성한다
· HTMLElement: 이벤트 변경

<div class="preview-box" v-if="url">
    <img class="image-preview" v-bind:src="url">
</div>

v-if 지시문에서 URL이 있는 경우에만 미리보기를 표시합니다.

완성 이미지

표시 사진은 기호로 CSS를 기재해 주면 좋을까 생각합니다.
(※이 사진은 학생 시절에 3D 프린터로 만든 인공 근육용 부품입니다)

요약

이번에는 Vue.js를 사용하여 이미지의 미리보기 기능 구현에 대해 소개했습니다.
Vue.js가 아니라도 물론 구현할 수 있지만 비교적 간단하기 때문에 Vue.js에서의 학습의 첫걸음으로 추천합니다.