https://github.com/biennui1998mu/vuenos-upload-image
Component for upload Image
https://github.com/biennui1998mu/vuenos-upload-image
npm npm-package scss typescript upload-images vue vue3 vue3-component vue3-composition-api vue3-typescript
Last synced: 4 months ago
JSON representation
Component for upload Image
- Host: GitHub
- URL: https://github.com/biennui1998mu/vuenos-upload-image
- Owner: biennui1998mu
- Created: 2022-07-05T08:53:20.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-07-06T03:22:18.000Z (almost 3 years ago)
- Last Synced: 2025-02-06T02:38:46.767Z (5 months ago)
- Topics: npm, npm-package, scss, typescript, upload-images, vue, vue3, vue3-component, vue3-composition-api, vue3-typescript
- Language: Vue
- Homepage: https://www.npmjs.com/package/vuenos-upload-image
- Size: 275 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vuenos-upload-image
> description
## Prerequisites
This project using NodeJS (version 16.10.0 or later) and NPM.
[Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install.
To make sure you have them available on your machine,
try running the following command.
```sh
$ npm -v && node -v
7.24.0
v16.10.0
```
## Table of contents
- [vuenos-upload-image](#vuenos-upload-image)
- [Prerequisites](#prerequisites)
- [Table of contents](#table-of-contents)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Import component](#import-component)
- [Upload image](#upload-image)
- [Preview image](#preview-image)
- [Variables binding](#variables-binding)
- [Versioning](#versioning)
- [Author](#author)
## 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:
```sh
npm install vuenos-upload-image
```
## Usage
### Import component
```typescript
import VuenosUploadImage from "vuenos-upload-image";
```
```html
```
### Upload image
> * Set ```type = 'upload'```
> * Get list of file image through function ```getImgFileList()```
```typescript
const getImgFileList = (val) => {
console.log(val)
}
```
* Example
```html
```
### Preview image
> * Set ```type = 'preview'```
>* Pass array of img path to ```:imgListPreview```
```typescript
const imgListPreview = ref([]);
```
* Example
```html
```
### 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
* **Sơn Nguyễn** - *Initial work* - [Sơn Nguyễn](https://github.com/biennui1998mu)