React TypeScript实现上传非图片文件时显示错误提示

原代码的核心问题是文件类型判断逻辑错误，同时存在几处语法和逻辑疏漏，以下是修复后的完整方案：

修复后的完整代码 #

import { useState } from 'react';
import { Typography } from '@mui/material'; // 假设使用Material UI组件库

const ImageUploader = () => {
  const [fileLogoError, setFileLogoError] = useState("");
  const [selectedLogoFile, setSelectedLogoFile] = useState<File | null>(null);
  const [imagePreviewUrl, setImagePreviewUrl] = useState<string>("");
  const previewFile = "/path/to/default-preview.png"; // 替换为你的默认预览图路径

  const handleLogoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    
    // 处理用户打开文件选择器后取消的场景
    if (!file) {
      setFileLogoError("");
      setSelectedLogoFile(null);
      setImagePreviewUrl("");
      return;
    }

    // 正确判断所有图片格式
    if (file.type.startsWith('image/')) {
      setSelectedLogoFile(file);
      setFileLogoError("");
      // 生成本地预览链接
      const previewUrl = URL.createObjectURL(file);
      setImagePreviewUrl(previewUrl);
    } else {
      setFileLogoError("Please upload only Image Format");
      setSelectedLogoFile(null);
      setImagePreviewUrl("");
    }
  };

  return (
    <div>
      {/* 隐藏的原生文件上传输入 */}
      <input
        id="CT_SelectFile"
        onChange={handleLogoChange}
        name="file"
        hidden
        type="file"
        accept="image/*"
      />
      {/* 自定义上传触发区域 */}
      <label htmlFor="CT_SelectFile" style={{ cursor: 'pointer' }}>
        {selectedLogoFile ? (
          <>
            <img src={imagePreviewUrl} height="45px" alt="Uploaded preview" />
            <Typography variant='subtitle1'>
              <span>{selectedLogoFile.name}</span>
            </Typography>
          </>
        ) : (
          <>
            {fileLogoError ? (
              <Typography variant='subtitle1' color="error">
                {fileLogoError}
              </Typography>
            ) : (
              <>
                <img src={previewFile} width="40px" height="40px" alt="Upload placeholder" />
                <Typography variant='subtitle1'>
                  Upload your Image
                </Typography>
              </>
            )}
          </>
        )}
      </label>
    </div>
  );
};

export default ImageUploader;

关键修改说明 #

• 修复类型判断逻辑：把file.type == "image/*"改成file.type.startsWith('image/')，因为实际文件的MIME类型是具体值（如image/png、image/jpeg），不会匹配通配符格式。
• 处理空文件场景：增加对event.target.files?.[0]的空值判断，避免用户取消选择文件时出现报错。
• 生成预览链接：使用URL.createObjectURL()生成图片的本地预览地址，确保上传后能正常显示预览图。
• 状态重置：选择错误文件或取消选择时，同步重置选中文件和预览URL的状态，避免界面显示混乱。
• 修正语法错误：修复了Typography组件的引号闭合问题（原代码variant='subtitle1>缺少闭合引号）。
• 优化错误提示：给错误提示添加color="error"属性，让错误信息更醒目。
• 移除冗余属性：删除了multiple属性（如果仅需单文件上传），避免多选导致的逻辑冲突。

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