文件拖拽上传

js
-------------------------------------------------------------------------------------------
     <div class="up-file" ref="upFile">
                <input type="file" ref="fileInput" accept=".xls,.xlsx,.csv"
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 100;"
                    @change="handleFileChange">
                <div class="box-svg">
                    <svg t="1767945363879" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1830" width="100%" height="100%">
                        <path
                            d="M736.005 696.494H174.18c-17.673 0-32-14.327-32-32V255.582c0-17.673 14.327-32 32-32h157.213c7.96 0 15.635 2.967 21.525 8.321l47.547 43.222h335.54c17.673 0 32 14.327 32 32v357.369c0 17.673-14.327 32-32 32z m-529.825-64h497.825V339.125H388.094a32.002 32.002 0 0 1-21.525-8.321l-47.547-43.222H206.18v344.912z"
                            :fill="sonTheme === 'dark' ? '#C3CAD3' : '#C3CAD3'" p-id="1831"></path>
                        <path
                            d="M853.18 821.092H317.509c-17.673 0-32-14.327-32-32s14.327-32 32-32H821.18V414.206c0-17.673 14.327-32 32-32s32 14.327 32 32v374.886c0 17.673-14.327 32-32 32z"
                            :fill="sonTheme === 'dark' ? '#C3CAD3' : '#C3CAD3'" p-id="1832"></path>
                    </svg>

                </div>
                <div class="text-tip">
                    拖拽文件或点击上传
                </div>
            </div>
            


-------------------------------------------------------------------------------------------


        // 触发文件选择
        handleFileChange(e) {
            const files = e.target.files;
            this.handleFiles(files);
            // 清空 input，避免选同一个文件不触发 change
            e.target.value = '';
        },
        // 处理文件选择
        handleFiles(files) {
            const ALLOW_TYPES = [
                'application/vnd.ms-excel',                 // .xls
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
                'text/csv'                                  // .csv
            ];

            const ALLOW_EXT = ['xls', 'xlsx', 'csv'];
            if (!files || files.length === 0) return;

            if (files.length > 1) {
                this.$message?.error?.('只能上传一个文件');
                return;
            }
            const file = files[0];
            const ext = file.name.split('.').pop().toLowerCase();
            const typeValid =
                ALLOW_TYPES.includes(file.type) ||
                ALLOW_EXT.includes(ext);

            if (!typeValid) {
                this.$message?.warning?.('仅支持 Excel、CSV 格式文件');
                return;
            }

            console.log('上传文件：', file);

            // TODO：这里可以开始上传
            // this.uploadFile(file);
        },
        
        
      mounted() {
        // 进入
        this.$refs.upFile.addEventListener('dragenter', (e) => {
            e.preventDefault();
            this.$refs.upFile.classList.add('bg-hover');

        });
        // 一直在元素上方，每隔小段时间内触发drop事件
        this.$refs.upFile.addEventListener('dragover', (e) => {
            e.preventDefault();
        });
        // 松开鼠标时触发
        this.$refs.upFile.addEventListener('drop', (e) => {
            e.preventDefault();
            this.$refs.upFile.classList.remove('bg-hover');
            // fileInput.files 是只读的 这样写兼容性不好
            // this.$refs.fileInput.files = e.dataTransfer.files;
            // this.$refs.fileInput.dispatchEvent(new Event('change'));
            this.handleFiles(e.dataTransfer.files);
        });
        this.getDateLoadTime();

    },
-------------------------------------------------------------------------------------------

         .up-file {

            width: 100%;
            height: 18.75vw;
            border: 5px dashed #999;
            border-radius: 0.625rem;
            margin-top: 30px;
            position: relative;

            &.bg-hover {
                border-color: #409eff; // 高亮边框（偏 Element 风格）
                background-color: rgba(64, 158, 255, 0.08);
            }

            .box-svg {
                width: 100%;
                height: 100%;
                margin-top: -20px;



            }

            .text-tip {
                position: absolute;
                bottom: 1.0417vw;
                left: 50%;
                transform: translate(-50%, 0);
                font-size: 1.6667vw;
                white-space: nowrap;

            }

        }

样式