/vuenos-upload-image

Component for upload Image

Primary LanguageVue

vuenos-upload-image

description

Prerequisites

This project using NodeJS (version 16.10.0 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
7.24.0
v16.10.0

Table of contents

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

To install and set up the library, run:

npm install vuenos-upload-image

Usage

Import component

import VuenosUploadImage from "vuenos-upload-image";
<vuenos-upload-image :imgListPreview="imgListPreview"
           :type="'upload'"
           :disabled="true"
           @getImgFileList="getImgFileList">
</vuenos-upload-image>

Upload image

  • Set type = 'upload'
  • Get list of file image through function getImgFileList()
const getImgFileList = (val) => {
    console.log(val)
}
  • Example
<vuenos-upload-image :type="'upload'"
           @getImgFileList="getImgFileList">
</vuenos-upload-image>

Preview image

  • Set type = 'preview'
  • Pass array of img path to :imgListPreview
const imgListPreview = ref([]);
  • Example
<vuenos-upload-image :type="'preview'"
           :imgListPreview="imgListPreview">
</vuenos-upload-image>

Variables binding

ATTRIBUTE DESCRIPTION REQUIRED TYPE ACCEPTED VALUE DEFAULT
imgListPreview List of image want to show *(Only preview) Array empty
type Type of use * String upload/preview empty
getImgFileList Function get image list *(Only upload) Function
disabled disable select img Boolean true/false false
width width of component frame Number 90 75px
maxImages max image can upload Number 3 9999
imageTypes image type can upload String '.jpg,.jpeg,..' 'image/*'
maxSize max size of each image upload Number 8000000 8000000

Versioning

v0.0.8

Author