Vue 实现自定义拖拽上传

最新推荐文章于 2023-10-28 10:08:04 发布

HolleBug

最新推荐文章于 2023-10-28 10:08:04 发布

阅读量145

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45364616/article/details/130167583

版权

        this.$el.addEventListener('dragover', (event) => {
            event.preventDefault();
            this.$el.classList.add('drag-over');
        });

        this.$el.addEventListener('dragleave', () => {
            this.$el.classList.remove('drag-over');
        });

        this.$el.addEventListener('drop', (event) => {
            event.preventDefault();
            this.$el.classList.remove('drag-over');

            const files = event.dataTransfer.files;
            let file = files[0]
            if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                return this.$message.error('请选择正确文件类型')
            } else {
                this.onFile(files[0])
            }
        });