Image Upload Vue for Vue 3.x

A simple and customisable image upload component for Vue 3.x

Screenshots

Features

• Attach and upload more than one image
• Update image and attachments
• Customize image height and width
• Customize image upload title
• Customize image border radius using Bootstrap classes
• Customize default image before new image attachment

Demo

https://image-upload-vue.netlify.app/

Installation

Install via NPM

  npm i image-upload-vue

or include into dependencies section of package.json

  npm install --save image-upload-vue

---

To install globally

  import ImageUploadVue from 'image-upload-vue'

  Vue.use(ImageUploadVue)

or to install in individual components

    import ImageUpload from 'image-upload-vue'

Getting Started

Single Upload

    <image-upload action="create"
        :image_style="{
            border: 'rounded-circle',
            height: '100',
            width: '100'
        }"
    />

---

Multi Upload

    <image-upload upload_type="multi" action="edit" :urls="images"
        :image_style="{
            height: '100',
            width: '100'
        }"
    />

The urls consists of an array of images which can be data.

    data(){
        return{
            images: [
                require("@/assets/images/foobar.png"),
                "https://github.com/xxxxxx/xxxxx/xxxx/xxxxx/xxxxx/xxxx/foobar.png?raw=true"
            ]
        }
    },

To get the output file for server upload

    <script>
    import {mapGetters} from 'vuex'
    export default {
        computed:{
            ...mapGetters([
                "createSingle",  //single file output using ***upload_type="single" action="create"***
                "updateSingle",    //single file output using ***upload_type="single" action="edit"***
                "createMulti",    //single file output using ***upload_type="multi" action="create"***
                "updateMulti"       //single file output using ***upload_type="multi" action="edit"***
            ])
        }
    };
    </script>

Docs

The following props can be passed to the component:

Prop	Description	Type	Default
action	This lets the vue-image-upload know the action to be performed: create or edit	String	create
title	This is the text of the file input button	String	Choose image
image_style	These are image style properties: border-radius, height, width	Object	height = 160, width = 160
url	The url / file location of the image to be loaded for single upload	String
urls	The url / file location of the image to be loaded for multi upload	Array
upload type	If set to multi, multiple image can be created and edited	String	single
default	The deafult image of the component before attachment	String	default.png