React和TypeScript如何实现文件上传组件并优化清除操作的用户体验

在React和TypeScript项目中，文件上传组件是很多业务场景的必备功能，而清除操作的体验优化往往容易被开发者忽略。合理的清除交互可以减少用户误操作，提升整体使用感受，下面我们详细讲解实现方案。

基础文件上传组件实现

首先我们先搭建一个基础的文件上传组件，支持选择文件、展示文件列表、基础清除功能。我们先定义相关的类型：

// 定义文件信息类型
interface UploadFile {
  id: string;
  name: string;
  size: number;
  type: string;
  // 文件本地预览地址
  previewUrl?: string;
}

// 组件Props类型
interface UploadProps {
  // 允许上传的文件类型
  accept?: string;
  // 最多上传文件数量
  maxCount?: number;
  // 文件变化回调
  onChange?: (files: UploadFile[]) => void;
}

接下来实现基础的上传组件核心逻辑：

import React, { useState, useRef, useCallback } from 'react';

const Upload: React.FC<UploadProps> = (props) => {
  const { accept, maxCount = 5, onChange } = props;
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);

  // 生成唯一文件id
  const generateFileId = () => Math.random().toString(36).slice(2, 10);

  // 处理文件选择
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;
    const newFiles: UploadFile[] = [];
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      // 超过最大数量限制则停止添加
      if (fileList.length + newFiles.length >= maxCount) break;
      const fileItem: UploadFile = {
        id: generateFileId(),
        name: file.name,
        size: file.size,
        type: file.type,
      };
      // 如果是图片类型生成预览地址
      if (file.type.startsWith('image/')) {
        fileItem.previewUrl = URL.createObjectURL(file);
      }
      newFiles.push(fileItem);
    }
    const updatedList = [...fileList, ...newFiles];
    setFileList(updatedList);
    onChange?.(updatedList);
    // 清空input值，允许重复选择同一文件
    if (inputRef.current) {
      inputRef.current.value = '';
    }
  };

  // 基础清除单个文件
  const handleRemoveBasic = (id: string) => {
    const updatedList = fileList.filter(item => item.id !== id);
    setFileList(updatedList);
    onChange?.(updatedList);
  };

  return (
    <div className="upload-container">
      <input
        ref={inputRef}
        type="file"
        accept={accept}
        multiple
        style={{ display: 'none' }}
        onChange={handleFileChange}
      />
      <button onClick={() => inputRef.current?.click()}>选择文件</button>
      <ul className="file-list">
        {fileList.map(file => (
          <li key={file.id} className="file-item">
            <span>{file.name} ({(file.size / 1024).toFixed(2)}KB)</span>
            <button onClick={() => handleRemoveBasic(file.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Upload;

清除操作的体验问题

上面的基础实现中，清除操作存在几个明显的体验问题：

• 点击删除按钮没有确认提示，容易误触删除重要文件
• 删除后没有操作反馈，用户不确定是否删除成功
• 清空全部文件的操作缺失，用户需要逐个删除很繁琐
• 删除图片类文件后，没有释放预览地址的内存，可能造成内存泄漏

清除操作优化方案

1. 添加删除确认提示

针对单个文件删除，添加二次确认弹窗，避免用户误操作：

// 优化后的单个文件删除逻辑
const handleRemoveWithConfirm = (id: string, name: string) => {
  // 使用浏览器原生确认弹窗，也可以替换为自定义弹窗组件
  const isConfirm = window.confirm(`确定要删除文件「${name}」吗？`);
  if (!isConfirm) return;
  // 释放图片预览地址内存
  const targetFile = fileList.find(item => item.id === id);
  if (targetFile?.previewUrl) {
    URL.revokeObjectURL(targetFile.previewUrl);
  }
  const updatedList = fileList.filter(item => item.id !== id);
  setFileList(updatedList);
  onChange?.(updatedList);
};

2. 添加操作反馈提示

删除成功后给用户明确的反馈，这里使用简单的状态提示实现：

// 新增提示状态
const [removeTip, setRemoveTip] = useState('');

// 优化后的删除逻辑加入提示
const handleRemoveWithTip = (id: string, name: string) => {
  const isConfirm = window.confirm(`确定要删除文件「${name}」吗？`);
  if (!isConfirm) return;
  const targetFile = fileList.find(item => item.id === id);
  if (targetFile?.previewUrl) {
    URL.revokeObjectURL(targetFile.previewUrl);
  }
  const updatedList = fileList.filter(item => item.id !== id);
  setFileList(updatedList);
  onChange?.(updatedList);
  // 显示删除成功提示
  setRemoveTip(`文件「${name}」已删除`);
  // 2秒后隐藏提示
  setTimeout(() => setRemoveTip(''), 2000);
};

在组件UI中添加提示展示区域：

{removeTip && <div className="remove-tip">{removeTip}</div>}

3. 添加一键清空全部功能

当文件列表较多时，提供一键清空功能可以提升操作效率：

// 清空全部文件逻辑
const handleClearAll = () => {
  if (fileList.length === 0) return;
  const isConfirm = window.confirm('确定要清空所有已选文件吗？');
  if (!isConfirm) return;
  // 释放所有图片预览地址的内存
  fileList.forEach(file => {
    if (file.previewUrl) {
      URL.revokeObjectURL(file.previewUrl);
    }
  });
  setFileList([]);
  onChange?.([]);
  setRemoveTip('已清空所有文件');
  setTimeout(() => setRemoveTip(''), 2000);
};

在文件列表上方添加清空按钮：

{fileList.length > 0 && (
  <button className="clear-all-btn" onClick={handleClearAll}>
    清空全部 ({fileList.length}个文件)
  </button>
)}

4. 组件卸载时清理内存

为了防止组件卸载后预览地址没有被释放，需要在组件卸载时统一清理：

import { useEffect } from 'react';

// 在组件内添加卸载清理逻辑
useEffect(() => {
  return () => {
    // 组件卸载时释放所有预览地址
    fileList.forEach(file => {
      if (file.previewUrl) {
        URL.revokeObjectURL(file.previewUrl);
      }
    });
  };
}, [fileList]);

优化后的完整组件示例

整合所有优化点后的完整组件代码如下：

import React, { useState, useRef, useCallback, useEffect } from 'react';

interface UploadFile {
  id: string;
  name: string;
  size: number;
  type: string;
  previewUrl?: string;
}

interface UploadProps {
  accept?: string;
  maxCount?: number;
  onChange?: (files: UploadFile[]) => void;
}

const Upload: React.FC<UploadProps> = (props) => {
  const { accept, maxCount = 5, onChange } = props;
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [removeTip, setRemoveTip] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  const generateFileId = () => Math.random().toString(36).slice(2, 10);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;
    const newFiles: UploadFile[] = [];
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      if (fileList.length + newFiles.length >= maxCount) break;
      const fileItem: UploadFile = {
        id: generateFileId(),
        name: file.name,
        size: file.size,
        type: file.type,
      };
      if (file.type.startsWith('image/')) {
        fileItem.previewUrl = URL.createObjectURL(file);
      }
      newFiles.push(fileItem);
    }
    const updatedList = [...fileList, ...newFiles];
    setFileList(updatedList);
    onChange?.(updatedList);
    if (inputRef.current) {
      inputRef.current.value = '';
    }
  };

  const handleRemoveFile = (id: string, name: string) => {
    const isConfirm = window.confirm(`确定要删除文件「${name}」吗？`);
    if (!isConfirm) return;
    const targetFile = fileList.find(item => item.id === id);
    if (targetFile?.previewUrl) {
      URL.revokeObjectURL(targetFile.previewUrl);
    }
    const updatedList = fileList.filter(item => item.id !== id);
    setFileList(updatedList);
    onChange?.(updatedList);
    setRemoveTip(`文件「${name}」已删除`);
    setTimeout(() => setRemoveTip(''), 2000);
  };

  const handleClearAll = () => {
    if (fileList.length === 0) return;
    const isConfirm = window.confirm('确定要清空所有已选文件吗？');
    if (!isConfirm) return;
    fileList.forEach(file => {
      if (file.previewUrl) {
        URL.revokeObjectURL(file.previewUrl);
      }
    });
    setFileList([]);
    onChange?.([]);
    setRemoveTip('已清空所有文件');
    setTimeout(() => setRemoveTip(''), 2000);
  };

  useEffect(() => {
    return () => {
      fileList.forEach(file => {
        if (file.previewUrl) {
          URL.revokeObjectURL(file.previewUrl);
        }
      });
    };
  }, [fileList]);

  return (
    <div className="upload-container">
      <input
        ref={inputRef}
        type="file"
        accept={accept}
        multiple
        style={{ display: 'none' }}
        onChange={handleFileChange}
      />
      <button onClick={() => inputRef.current?.click()}>选择文件</button>
      {removeTip && <div className="remove-tip">{removeTip}</div>}
      {fileList.length > 0 && (
        <div className="file-list-header">
          <span>已选文件 ({fileList.length}/{maxCount})</span>
          <button className="clear-all-btn" onClick={handleClearAll}>清空全部</button>
        </div>
      )}
      <ul className="file-list">
        {fileList.map(file => (
          <li key={file.id} className="file-item">
            <span>{file.name} ({(file.size / 1024).toFixed(2)}KB)</span>
            <button onClick={() => handleRemoveFile(file.id, file.name)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Upload;

总结

文件上传组件的清除操作优化不需要复杂的逻辑，只需要在基础功能上加入确认提示、操作反馈、一键清空、内存清理这几个细节，就能大幅提升用户体验。在实际项目中，还可以根据业务需求进一步扩展，比如自定义确认弹窗样式、添加删除动画、支持拖拽排序后删除等功能，让组件的交互更加完善。

ReactTypeScript文件上传组件清除操作优化修改时间：2026-06-15 08:39:40