i use laravel6,vue. in my project i use vue2Dropzone. i made photo update fuction. but it does not work. I want to load and delete the image of the server on dropzone. but after delete image on dropzone and i refresh page or go to another page delete method called as many images as it does.
i cant solve this problem. In chrome network tab, Requests are generated by the number of photoLen in loadPhoto . enter image description here
photoEdit.vue
<div class="mt-4">
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-removed-file="imageRemoved"></vue-dropzone>
</div>
data(){
dropzoneOptions: {
url: `/api/photo/${this.$route.params.id}`,
addRemoveLinks: true,
dictRemoveFile: 'delete',
createImageThumbnails: true,
thumbnailWidth: 150,
parallelUploads: 50,
autoProcessQueue: true,
maxFileSize: 100,
timeout: 100000,
maxFiles: 50,
maxThumbnailFilesize: 100,
uploadMultiple: true,
dictDefaultMessage: "click and drag",
acceptedFiles: 'image/*',
headers: {
"X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content,
}
},
}
mounted() {
this.loadPhoto();
},
methods:{
loadPhoto() {
axios.get(this.apiUrl).then((response) => {
this.photo = response.data.data[0];
var photoLen = this.photo.photo_images.length;
console.log(photoLen);
for (var i = 0; i < photoLen; i++) {
var file = {size: 123, name: this.photo.photo_images[i].image_name};
var url = this.photo.photo_images[i].path;
this.$refs.myVueDropzone.manuallyAddFile(file, url);
}
}).catch(error => {
this.$router.push({name: 'adminPhoto'});
});
},
//vdropzone-removed-file called when dismount the component
imageRemoved(file, error, xhr) {
// alert(file);
//todo 해당경로로 갈시 삭제
var name = file.name;
console.log(file);
axios.post('/api/photo/delete',{
image_name : name,
})
.then((response) => {
console.log(response);
}, (error) => {
// error callback
console.log(error);
})
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
}