Vue 实现自定义拖拽上传

最新推荐文章于 2025-06-01 09:42:11 发布

HolleBug

最新推荐文章于 2025-06-01 09:42:11 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45364616/article/details/130167583

这段代码用于监听元素的拖放事件。当有文件拖过时，它会阻止默认操作并添加一个CSS类。在拖动离开或文件释放时，该类会被移除。如果dropped文件不是Excel格式，函数会显示错误消息；否则，它调用onFile函数处理文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        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])
            }
        });