1.0.0 • Published 4 years ago
vue-multiple-image-upload v1.0.0
vue-multiple-image-upload
A simple upload multiple image component for Vuejs
Development (NPM / Yarn)
npm run dev
yarn dev
Install
NPM / Yarn
Install the package:
npm install vue-multiple-image-upload
yarn add vue-multiple-image-upload
Then import it in your project
main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
import VueUploadMultipleImage from 'vue-multiple-image-upload'
export default {
components: {
VueUploadMultipleImage,
},
}
Browser global
<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-multiple-image-upload.js"></script>
Usage
You can simply view App.vue to see how to use vue-multiple-image-upload
How to use:
<vue-multiple-image-upload
@upload-success="uploadImageSuccess"
@before-remove="beforeRemove"
@edit-image="editImage"
:data-images="images"
></vue-multiple-image-upload>
images
has the structure:
[
{
path: 'http://example.com/image.jpg',
default: 1,
highlight: 1,
caption: 'caption to display. receive', // Optional
}
]
Example
<template>
<div id="my-strictly-unique-vue-multiple-image-upload" style="display: flex; justify-content: center;">
<vue-multiple-image-upload
@upload-success="uploadImageSuccess"
@before-remove="beforeRemove"
@edit-image="editImage"
:data-images="images"
idUpload="myIdUpload"
editUpload="myIdEdit"
></vue-multiple-image-upload>
</div>
</template>
<script>
import VueUploadMultipleImage from 'vue-multiple-image-upload'
import axios from 'axios'
export default {
name: 'app',
data () {
return {
images: []
}
},
components: {
VueUploadMultipleImage
},
methods: {
uploadImageSuccess(formData, index, fileList) {
console.log('data', formData, index, fileList)
// Upload image api
// axios.post('http://your-url-upload', formData).then(response => {
// console.log(response)
// })
},
beforeRemove (index, done, fileList) {
console.log('index', index, fileList)
var r = confirm("remove image")
if (r == true) {
done()
} else {
}
},
editImage (formData, index, fileList) {
console.log('edit data', formData, index, fileList)
}
}
}
</script>
<style>
#my-strictly-unique-vue-multiple-image-upload {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Options
Props
Events
Dependencies
1.0.0
4 years ago