PC端拖拽上传。_pc 拖拽上传-优快云博客

本文链接：https://blog.youkuaiyun.com/Dong8508/article/details/106636538

本文介绍了如何使用JavaScript实现PC端的文件拖拽上传功能，包括拖放区的设置、文件选择与验证以及上传事件的处理等核心步骤。

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

 <div class="drag-con" @dragover="fileDragover" @dragenter="dragenter"
                         @dragleave="dragleave" @drop="fileDrop">
                        <div class="icon">
                            <svg-icon class="svg-upload" iconClass="icon-upload"/>
                        </div>
                        <div class="info">
                            请上传文件信息表
                        </div>
                        <div class="tip">
                            支持xls、xlsx，并可直接拖拽上传文件
                        </div>
                        <div class="upload">
                            <input type="file" accept=".xls, .xlsx" id="fileInput1" @change="chooseUploadFile" style="display: none;"/>
                            <label for="fileInput1" class="btn">上传文件</label>
                        </div>
                    </div>

JS如下：

chooseUploadFile(e) {
            const file = e.target.files.item(0);
            if (!file) return;
            this.batchFile = file;
          
            // 清空，防止上传后再上传没有反应
            e.target.value = '';
        },
        // 拖拽上传
        fileDragover(e) {
            e.preventDefault();
        },
        //拖拽目标区域
        dragenter(e) {
            this.dragConTag = e.target;
            this.isDargenter = true;
        },
        //完成拖拽
        dragleave(e) {
            if (e.target == this.dragConTag) {
                this.isDargenter = false;
            }
        },
        fileDrop(e) {
            e.preventDefault();
            this.isDargenter = false;
            const file = e.dataTransfer.files[0]; // 获取到第一个上传的文件对象
            if (!file) return;
            this.batchFile = file;
          
            // 清空，防止上传后再上传没有反应
            e.target.value = '';
        },

 :class="isDargenter ? 'dragenter' : ''


设置拖拽到指定区域时，盒子的变化，

PC端 拖拽上传。

PC端拖拽上传。