如果输入标签初始化为null，则包含e.target.files的数组为空

Question

您好，我现在正在上传一个文件夹，但是当我再次上传同一个文件夹时，出现了无法上传的问题。我设置为null的那一刻出现数据为空的问题

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

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

    if (files.length > 0) {
        uploadFolders.push(files);

        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>`;

    }
}


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

folderUploadInput.addEventListener('click', function (e) {
    e.target.value = null;
});

folderUploadInput.addEventListener('change', upload)

Answer 1

您正在将 e.target.files 对象保存到另一个数组中，稍后您将 e.target.files 的值设置为 null。这并不像您想象的那样有效，因为将对象推入数组会将其存储为 reference 而不是 copy。 See this answer 以更好地解释设置 e.target.files = null 时发生的情况。

要解决您的问题，您需要将其存储为副本。有几种方法可以获取 Javascript 中对象的副本，但我更喜欢 this method.

const files = Object.assign({}, e.target.files);

如果输入标签初始化为null，则包含e.target.files的数组为空

If the input tag is initialized to null, the array containing e.target.files is empty

javascript

upload