TypeScript中React上传事件event.target.files的空值处理方案

我编写了一个handleImageUpload函数，接收React.ChangeEvent<HTMLInputElement>或React.DragEvent<HTMLDivElement>事件对象，以及FileList类型的上传文件作为参数。当event.target为空或null时会出现问题，若将files的类型修改为FileList | null，会导致其他代码报错。需要在不改动其他代码的前提下处理该空值可能性。

现有代码 #

handleImageUpload函数 #

const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement> | 
React.DragEvent<HTMLDivElement>, files:FileList) => {
    stopReload(e);
    const data = new FormData()
    for(let i = 0; i<files?.length; i++){
      data.append('images', files[i])
    }
    const {data:images} = await axios.post('/products/upload', data, {
      headers: {'Content-Type':'multipart/form-data'}
    })
    setAddedPhotos(prevState => [...prevState, ...images])
    console.log(addedPhotos)
};

TSX代码 #

<div className="mb-8"
     onDragOver={(e) => stopReload(e)}
     onDrop={(e) => handleDragEvent(e)}
> 
    <label 
        className="relative  cursor-pointer flex min-h-[200px] items-center justify-center rounded-md border border-dashed border-gray-300 p-12 text-center"
    >
        <div>
            <span className="mb-2 block text-xl font-semibold text-[#07074D]">
                Drop files here
            </span>
            <span className="mb-2 block text-base font-medium text-[#6B7280]">
                Or
            </span>
            <span
                className="inline-flex rounded border border-[#e0e0e0] py-2 px-7 text-base font-medium text-[#07074D]"
            >
                Browse
            </span>
        </div>
        <input type="file" onChange={(e) => handleImageUpload(e, e.target.files)} name="image" className="hidden" multiple={true} />
    </label>
</div>

其他函数 #

const handleDragEvent = (e: React.DragEvent<HTMLDivElement>) => {
    handleImageUpload(e, e.dataTransfer.files);
};

const stopReload = (e: React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    e.stopPropagation();
}

解决方案 #

核心思路是在调用handleImageUpload的地方提前处理空值，确保传入的files始终符合FileList类型，这样无需修改函数参数类型，也不会影响其他代码：

• 在文件选择的onChange事件中，先判断e.target.files是否存在，只有当它不为null时再调用handleImageUpload
• 拖拽事件中的e.dataTransfer.files本身就是FileList类型，无需额外处理

修改后的代码 #

调整后的TSX onChange部分 #

<input 
    type="file" 
    onChange={(e) => {
        const selectedFiles = e.target.files;
        // 仅当存在选中文件时才调用上传函数
        if (selectedFiles) {
            handleImageUpload(e, selectedFiles);
        }
    }} 
    name="image" 
    className="hidden" 
    multiple={true} 
/>

其他代码保持不变 #

handleImageUpload和handleDragEvent、stopReload函数都不需要修改，因为：

• handleDragEvent中e.dataTransfer.files是标准的FileList类型，不会出现null
• 新增的判断确保了handleImageUpload接收的files始终是有效的FileList，完全符合原函数的参数类型要求

这种方式既解决了e.target.files可能为null的问题，又不会对其他依赖handleImageUpload的代码造成任何影响。

内容的提问来源于stack exchange，提问作者gerard