如何在不带cli的情况下将dropzone与vuejs一起使用

Question

谁可以解释我如何在不使用Vue CLI的情况下将dropzone与vuejs一起使用。

how upload file using dropzone & vueJs

Answer 1

mounted() { console.log("resources/js/components/Horizontal/personal/userLists.vue Mounted()::") bus.$on('onUserListDeleteSuccess', (response) => { this.is_page_updating = false this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success'); // bus.$off('onUserListDeleteSuccess') }) bus.$on('onUserListDeleteFailure', (error) => { this.is_page_updating = false if (error.error_code != 11) { this.$setLaravelValidationErrorsFromResponse(error.message); this.showRunTimeError(error, this); this.showPopupMessage("User lists", 'Error adding user\'s list !', 'error'); } // bus.$off('onUserListDeleteFailure') }) this.is_page_loaded = true this.setAppTitle("Personal", 'User\'s lists', bus); }, // mounted() {

const app = new Vue({ el: '#newpost', data: { form: { title:'', }, allerros: [], success : false, }, methods : { onSubmit(){

        },
        DzSpanclick(){
            $("#filedrag").click();
        },
        DZint() {
            let dz = document.querySelector("#filedrag");
            var previewNode = document.querySelector("#dz-template");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;previewNode.parentNode.removeChild(previewNode);
            Dropzone.autoDiscover = false;
            this.uploadImageGalleryVar = new Dropzone(dz, {
                url:"{$base_dir}post",
                parallelUploads: 100,
                paramName: "file",
                params: { do: "imageupload" },
                thumbnailWidth: 600,
                thumbnailHeight: 600,
                autoProcessQueue: false,
                acceptedFiles:"image/*",
                previewTemplate: previewTemplate,
                uploadMultiple: false,
                maxFiles: 8,
                maxFilesize: 5,
                autoDiscover : false,
                previewsContainer: "#previews",
                headers: { "Accept": "application/javascript" }
            });
        },

    },
    mounted: function() {
        this.DZint();
    }

});