React中input file无法多选图片的解决方案求助

要让<input type="file" />支持多选图片，只需要添加关键属性并处理选中文件即可，具体操作如下：

• 开启多选权限：给input标签添加multiple属性，这是原生HTML自带的特性，开启后用户可按住Ctrl（Windows）/Command（Mac）选择多张文件，也能直接框选批量文件。搭配accept="image/*"属性还能过滤非图片文件，优化操作体验。

  基础代码示例：

  <input
    type="file"
    multiple
    accept="image/*"
    onChange={(e) => handleFileChange(e)}
  />
  

• 处理选中的图片：在onChange事件中，通过e.target.files获取选中的FileList对象，转成数组后方便后续预览、上传等操作。

  事件处理函数示例：

  const handleFileChange = (e) => {
    const selectedImages = Array.from(e.target.files);
    // 此处可执行图片预览、调用上传接口等逻辑
    console.log("选中的图片列表：", selectedImages);
  };
  

• 可选：添加图片预览：利用URL.createObjectURL生成临时预览地址，结合React状态管理实现实时预览，同时注意组件卸载时释放临时URL避免内存泄漏：

  完整组件示例：

  import { useState, useEffect } from 'react';
  
  function MultiImageUploader() {
    const [previewUrls, setPreviewUrls] = useState([]);
  
    const handleFileChange = (e) => {
      const selectedFiles = Array.from(e.target.files);
      const newPreviewUrls = selectedFiles.map(file => URL.createObjectURL(file));
      // 保留历史选中图片，若需清空重选则替换为setPreviewUrls(newPreviewUrls)
      setPreviewUrls(prev => [...prev, ...newPreviewUrls]);
    };
  
    useEffect(() => {
      return () => {
        previewUrls.forEach(url => URL.revokeObjectURL(url));
      };
    }, [previewUrls]);
  
    return (
      <div>
        <input
          type="file"
          multiple
          accept="image/*"
          onChange={handleFileChange}
        />
        <div style={{ marginTop: '1rem', display: 'flex', flexWrap: 'wrap' }}>
          {previewUrls.map((url, index) => (
            <img
              key={index}
              src={url}
              alt={`选中的图片${index + 1}`}
              style={{ width: '120px', height: '120px', objectFit: 'cover', margin: '0.5rem', border: '1px solid #eee' }}
            />
          ))}
        </div>
      </div>
    );
  }
  
  export default MultiImageUploader;
  

内容的提问来源于stack exchange，提问作者ابوالفضل حقانی نیا