Vue implements drag and drop or click to upload pictures

<template>
    <!--upload.vue Click to upload component-->
    <div class="file-selector">
        <z-btn class="selector-btn" color="primary" @click="handleUpClick">
            Select File</z-btn>
        <input
            ref="input"
            class="file-selector-input"
            type="file"
            :multiple="multiple"
            :accept="accept"
            @change="handleFiles"
        />
    </div>
</template>
<script>
    import {debounce} from 'lodash/function';
    export default {
        data() {
            return {
                accept: '.jpg,.jpeg,.png,.gif',
                multiple: false,
                list: [], // Selected file object uploadFinished: true, // Upload status startIndex: 0, // Start upload index, used to append files maxSize: 10 * 1024 * 1024, //10M (size in bytes)
                // source: this.$axios.CancelToken.source(), // axios cancels request};
        },
        methods: {
            // Reset reset() {
                this.list = [];
                this.source.cancel();
                this.startIndex = 0;
                this.uploadFinished = true;
                this.$refs.input && (this.$refs.input.value = null);
            },
            // Call the upload function handleUpClick: debounce(function () {
                // You can maintain an upload status here and disable the upload button during the upload process // if (!this.uploadFinished) this.$message.info('The previous file will be overwritten~');
                this.$refs.input.click();
            }, 300),
            handleFiles(e) {
                const files = e?.target?.files;
                this.readFiles(files);
            },
            // Process the files into objects before uploading readFiles(files) {
                if (!files || files.length <= 0) {
                    return;
                }
                for (const file of files) {
                    const url = window.URL.createObjectURL(file);
                    const obj = {
                        title: file.name.replace(/(.*\/)*([^.]+).*/ig, '$2'), // remove the file suffix url,
                        file,
                        fileType: file.type,
                        status: 0, // Status-> 0 Waiting, 1 Completed, 2 Uploading, 3 Upload failed percent: 0, // Upload progress};
                    // Define list in data in advance to save the files to be uploaded this.list.unshift(obj);
                    this.$emit('fileList', this.list);
                }
                // Define the startIndex in data to be 0 initially, and update it after the upload is complete to append the uploaded file // this.startUpload(this.startIndex);
            },

        }
    };
</script>
<style lang="scss">
.file-selector {
    .selector-btn {
        &:hover {
            background-color: rgba($color: #2976e6, $alpha: 0.8);
            transition: background 180ms;
        }
    }

    &-input {
        display: none;
    }
}
</style>

<template>
    <!-- Upload dialog -->
    <form-dialog
        v-model="$attrs.value"
        :title="title"
        persistent
        :loading="loading"
        maxWidth="600px"
        min-height='400px'
        @cancel="handleCancel"
        @confirm="handleSubmit"
    >
        <div
            class="d-flex flex-row justify-space-between">
            <z-form style='width: 260px; height: 100%;'>
                <form-item label="Image name" required>
                    <z-text-field
                        v-model="formData.name"
                        outlined
                        :rules="rules"
                        :disabled='disabled'
                        placeholder="Please enter the name of the image"
                    >
                    </z-text-field>
                </form-item>
                <form-item label="Description" required>
                    <z-textarea
                        v-model="formData.description"
                        outlined
                        :disabled='disabled'
                        placeholder="Please enter a description"
                        style="resize: none;"
                    >
                    </z-textarea>
                </form-item>
            </z-form>
            <div ref="pickerArea" class="rightBox">
                <div class="uploadInputs d-flex flex-column justify-center align-center" :class="[ dragging ? 'dragging' : '']">
                    <div ref="uploadBg" class="uploadBg my-2"></div>
                    <upload
                        ref="uploadBtn"
                        @fileList='fileList'
                    ></upload>
                    <div class="tip mt-2">Click the upload button, or drag the file into the box to upload</div>
                    <div class="tinyTip ">Please select a file no larger than 10M</div>
                </div>
            </div>
        </div>

    </form-dialog>

</template>
<script>
    import {debounce} from 'lodash/function';
    import upload from './upload';
    import {uploadImage} from '@/wv-main-admin/apis/image';

    export default {
        components:
            upload
        },
        props: ['dialogData'],
        data() {
            return {
                dialogFlag: '',
                title: 'Add/Edit Picture',
                loading: false,
                formData: {
                    name: '',
                    description: ''
                },
                disabled: false,
                rules: [v => !!v || 'Required'],
                data: {},
                dragging: true, //Whether to drag bindDrop: false,
                fileInfo: {},
            };
        },

        mounted() {

        },
        beforeDestroy() {
            // Unbind the drag event before the component is destroyed try {
                const dropbox = this.$refs.pickerArea;
                dropbox.removeEventListener('drop', this.handleDrop);
                dropbox.removeEventListener('dragleave', this.handleDragLeave);
                dropbox.removeEventListener('dragover', this.handleDragOver);
                this.bindDrop = false;
            } catch (e) { console.log(e, '=======I am an exception in unbinding the drag event before the component is destroyed'); }
        },
        methods: {
            //Cancel handleCancle() {
                // Close the current pop-up box this.$emit('input', false);
                // Force component to refresh this.$forceUpdate();
            },
            handleSubmit: debounce(function () {
                //Upload a single file const flag = this.checkMustsItem();
                if (flag) {
                    this.startUpload();
                    //Upload completed, force component to refresh this.$forceUpdate();
                }
            }, 300),

            //Listen to the value of the subcomponent fileList(data) {
                this.fileInfo = data[0];
                this.formData.name = this.fileInfo.title;
                const uploadBg = this.$refs.uploadBg;
                //Change the background image uploadBg.style.backgroundImage = `url(${this.fileInfo.url})`;
            },
            bindEvents() {
                const dropbox = this.$refs.pickerArea;
                // To prevent duplicate binding events, you need to initialize bindDrop to false in data
                if (!dropbox || this.bindDrop) { return; }
                // Bind the drag event and unbind it when the component is destroyed dropbox.addEventListener('drop', this.handleDrop, false);
                dropbox.addEventListener('dragleave', this.handleDragLeave);
                dropbox.addEventListener('dragover', this.handleDragOver);
                this.bindDrop = true;
            },
            // Drag to the upload area handleDragOver(e) {
                e.stopPropagation();
                e.preventDefault();
                this.dragging = true;
            },
            // Leave the upload area handleDragLeave(e) {
                e.stopPropagation();
                e.preventDefault();
                this.dragging = false;
            },
            //Drag ends handleDrop(e) {
                e.stopPropagation();
                e.preventDefault();
                this.dragging = false;
                const files = e.dataTransfer.files;
                // Call the upload function of the <upload/> component this.$refs.uploadBtn && this.$refs.uploadBtn.readFiles(files);
            },
            // Need to verify the file before uploading checkFile(index) {
                const file = this.list[index];
                // If the file does not exist, all files are uploaded if (!file) {
                    //Upload completed, throw success event to the parent component this.uploadFinished = true;
                    this.$emit('success', this.list);
                    // Clear the value in the upload control to ensure that the change event can be triggered normally this.$refs.input.value = null; this.startIndex = index > 1 ? index - 1 : 0;
                    return false;
                }

                // Check if it has been uploaded if (`${file.status}` === '1') {
                    this.startUpload(++index);
                    return false;
                }

                // Check file size if (this.maxSize && file.file && file.file.size >= this.maxSize) {
                    this.startUpload(++index);
                    return false;
                }

                return true;
            },
            checkMustsItem() {
                if (!this.fileInfo.file) {
                    this.$message.warning('Please upload the file!');
                    return false;
                } if (!this.formData.name) {
                    this.$message.warning('Please enter the file name!');
                    return false;
                } if (!this.formData.description) {
                    this.$message.warning('Please enter the file description!');
                    return false;
                }
                return true;
            },
            // Upload a single file startUpload() {
                this.loading = true;
                const params = {
                    type: 'image'
                };
                this.$set(params, 'file', this.fileInfo.file);
                this.$set(params, 'name', this.formData.name);
                this.$set(params, 'description', this.formData.description);
                uploadImage(params)
                    .then(res => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.$message.success('Upload successful~');
                            this.$emit('refreshList', false);
                            this.$emit('input', false);
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                    });
                // this.$axios({
                // url: this.url, // upload interface, passed in by props// method: 'post',
                // data,
                // withCredentials: true,
                // cancelToken: this.source.token, // used to cancel the interface request // // progress bar // onUploadProgress: e => {
                // if (fileObj.status === 1) { return; } // Uploaded // // The maximum value is limited to 99%
                // const p = parseInt((e.loaded / e.total) * 99);
                // if (e.total) {
                // fileObj.status = 2; // Uploading // fileObj.percent = p; // Update upload progress // } else {
                // fileObj.status = 3; // Upload failed// }
                // },
                // })
                // .then(response => {
                // if (`${response.code}` === '200') {
                // fileObj.status = 1;
                // fileObj.percent = 100;
                // } else {
                // fileObj.status = 3;
                // }
                // })
                // .catch(e => {
                // console.log(e, '====error');
                // fileObj.status = 3;
                // })
                // .finally(e => {
                // console.log(e, '====error');

                // this.startUpload(++index);
                // });
                // Upload completed},
        },
    };
</script>

<style lang='scss' scoped>
    .rightBox {
        width: 260px;
        height: 250px;
        border: 1px solid #ccc;
        margin-top: 18px;

        .uploadBg {
            width: 150px;
            height: 125px;
            background: url("../../../../assets/upload.png") no-repeat center center;
            background-size: contain;
        }
        .tip {
            font-size: 13px;
            color: rgba(0, 0, 0, 0.87);
        }
        .tinyTip {
            font-size: 12px;
            color: #8e8f9e;
        }
    }

</style>