input标签置空后重复上传同文件夹失败e.target.files为空问题

算力阿峰

2026-10-10

文件夹重复上传失败问题修复方案

根因分析

代码中直接将e.target.files（浏览器原生只读FileList类数组对象）的引用存入uploadFolders数组，没有存储实际的文件对象副本
点击上传控件时触发的click回调会将input的value置为null，此时input绑定的FileList会同步清空，数组中存储的引用指向的对象也会变为空，最终触发上传失败

修复代码

const uploadFolders = [];
let uploadFolderTemplate = ``;

function upload(e) {
    const files = e.target.files;

    if (files.length > 0) {
        // 核心修改：将FileList转成普通数组存储，脱离和input元素的引用关联
        const fileList = Array.from(files);
        uploadFolders.push(fileList);
        // 若需要保留原路径属性，可自行挂载到数组上
        fileList.path = files[0].path;

        uploadFolderTemplate = `
            <div class="card folder-list-info">
                <div class="card-header" style="display: inline-flex;">
                    <span>${files[0].path}</span>
                    <button type="button" class="close" aria-label="Close" style="margin-left: auto">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="card-body">
                    <div class="ext-box">
                    
                    </div>

                    <div class="colum-box">
                        
                    </div>

                    <div class="exports-data-file-box">

                    </div>
                </div>
            </div>`;
        // 处理完文件后再清空input value，时机更合理
        e.target.value = null;
    }
}


const folderUploadInput = document.querySelector('.folder-upload-input');
folderUploadInput.addEventListener('change', upload)