1

我使用 laravel6，vue。在我的项目中，我使用 vue2Dropzone。我做了照片更新功能。但它不起作用。我想在 dropzone 上加载和删除服务器的图像。但是在 dropzone 上删除图像后，我刷新页面或转到另一个页面删除方法，该方法称为尽可能多的图像。

我无法解决这个问题。在 chrome 网络选项卡中，请求由 loadPhoto 中的 photoLen 数量生成。 在此处输入图像描述

photoEdit.vue

<div class="mt-4">
     <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-removed-file="imageRemoved"></vue-dropzone>
</div>

数据（）{

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();
},

方法：{

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;
    },

}

4

0 回答 0