Vue JS Image Upload Preview Example

Vue js image upload with preview example. In this tutorial, you will learn how display image preview before upload in vue js.

This tutorial will guide you step by step onhow display image preview before upload in vue js. As well as, will make simple example of how to upload image with preview before upload in vue js app.

How to Display Preview Before Upload Image In Vue Js App

Just follow the following steps and display image preview before upload in vue Js app:

• Step 1 – Create New VUE JS App
• Step 2 – Navigate to Vue Js App
• Step 3 – Create Image Preview Component
• Step 4 – Add Component on App.vue

Step 1 – Create New VUE JS App

In this step, open your terminal and execute the following command to create new vue js app:

vue create vue-image-upload-preview

Step 2 – Navigate to Vue Js App

In this step, open your terminal and execute the following command to enter your vue js app root directory:

cd vue-image-upload-preview

Step 3 – Create Image Preview Component

In this step, visit /src/components directory and create a new component called file-preview.vue and add the following code into it:

<template>
  <div>
    <div
      class="imagePreviewWrapper"
      :style="{ 'background-image': `url(${previewImage})` }"
      @click="selectImage">
    </div>

    <input
      ref="fileInput"
      type="file"
      @input="pickFile">
  </div>
</template>

<script>
export default {
  data() {
      return {
        previewImage: null
      };
    },
  methods: {
      selectImage () {
          this.$refs.fileInput.click()
      },
      pickFile () {
        let input = this.$refs.fileInput
        let file = input.files
        if (file && file[0]) {
          let reader = new FileReader
          reader.onload = e => {
            this.previewImage = e.target.result
          }
          reader.readAsDataURL(file[0])
          this.$emit('input', file[0])
        }
      }
  }
}
</script>

<style scoped lang="scss">
.imagePreviewWrapper {
    width: 250px;
    height: 250px;
    display: block;
    cursor: pointer;
    margin: 0 auto 30px;
    background-size: cover;
    background-position: center center;
}
</style>

Step 4 – Add Component on App.vue

In this step, visit /src/ directory and App.vue file. And then add the following code into it:

<template>
    <FilePreview></FilePreview>
</template>

<script>
import FilePreviewfrom './components/FilePreview';

export default {
  components: {
    FilePreview
  }
}
</script>

Conclusion

Vue js image upload with preview example. In this tutorial, you have learned how display image preview before upload in vue js.

Recommended VUE JS Tutorials