Hey there, I'm currently facing an issue while trying to upload images using this plugin. It seems that my uploadImageSuccess event is not triggering as expected. Apologies if I made a mistake, I'm still new to Vue.js.
Here is the code snippet I'm working with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-upload-multiple-image</title>
</head>
<body>
<div id="el">
<div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
<vue-upload-multiple-image
@upload-success="uploadImageSuccess"
@before-remove="beforeRemove"
@edit-image="editImage"
@data-change="dataChange"
:data-images="images"
></vue-upload-multiple-image>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daacafbff7afaab6b5bbbef7b7afb6aeb3aab6bff7b3b7bbbdbf9aebf4eaf4e8">[email protected]</a>/dist/vue-upload-multiple-image.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#el',
data() {
return {
images: []
}
},
components: {
VueUploadMultipleImage
},
methods: {
uploadImageSuccess(formData, index, fileList) {
alert('dd');
console.log('data', formData, index, fileList)
// Upload image api
// axios.post('http://your-url-upload', { data: 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)
},
dataChange(data) {
console.log(data)
}
}
});
</script>
</body>
</html>
If anyone can provide some guidance on this it would be greatly appreciated. The error message I'm seeing reads:
ReferenceError: VueUploadMultipleImage is not defined