Firebase多图上传页面问题求助：刷新、重复显示及数量限制

问题1：页面刷新 #

按钮默认类型为submit，会触发默认表单提交行为导致页面刷新，给按钮添加type="button"即可阻止：

<button type="button" onClick={handleClick}>Upload</button>

问题2：图片显示两次 #

初始化时useEffect中错误地使用追加方式更新imgUrl，若页面刷新会重复拉取所有图片导致重复显示。修改初始化逻辑为直接覆盖imgUrl：

useEffect(() => {
  const fetchImages = async () => {
    try {
      const imgs = await listAll(ref(imageDb, "files"));
      const urls = await Promise.all(
        imgs.items.map(async (item) => await getDownloadURL(item))
      );
      setImgUrl(urls); // 直接覆盖而非追加
    } catch (error) {
      console.error("Error fetching images:", error);
    }
  };

  fetchImages();
}, []);

问题3：限制最多4张不重复图片 #

1. 开启文件多选支持，修改input为多选模式
2. 上传前检查已上传数量是否小于4，同时通过文件的name和lastModified组合判断是否为重复文件
3. 批量处理选中的文件上传

修改后的完整代码 #

import { useState, useEffect } from 'react';
import { ref, uploadBytes, getDownloadURL, listAll } from 'firebase/storage';
import { v4 as uuidv4 } from 'uuid';

// 假设imageDb是你的Firebase Storage引用
const ImageUploader = () => {
  const [selectedFiles, setSelectedFiles] = useState([]); // 存储选中的文件数组
  const [imgUrl, setImgUrl] = useState([]);

  // 检查文件是否已上传过（通过文件名+修改时间判断）
  const isFileDuplicate = (file) => {
    // 简化判断：假设URL包含文件名前缀，若需更精准可将文件元数据存入Firebase数据库
    return imgUrl.some(url => url.includes(file.name.split('.')[0]));
  };

  const handleClick = async () => {
    // 过滤重复文件，且确保上传后总数量不超过4
    const validFiles = selectedFiles.filter(file => {
      return !isFileDuplicate(file) && imgUrl.length < 4;
    });

    const uploadCount = Math.min(validFiles.length, 4 - imgUrl.length);
    if (uploadCount === 0) {
      alert('最多上传4张不重复的图片');
      return;
    }

    try {
      const newUrls = await Promise.all(
        validFiles.slice(0, uploadCount).map(async (file) => {
          const imgRef = ref(imageDb, `files/${uuidv4()}_${file.name}`); // 加入UUID避免文件名冲突
          const uploadTaskSnapshot = await uploadBytes(imgRef, file);
          return await getDownloadURL(uploadTaskSnapshot.ref);
        })
      );
      // 更新图片URL列表
      setImgUrl(prev => [...prev, ...newUrls]);
      // 清空选中的文件
      setSelectedFiles([]);
    } catch (error) {
      console.error("Error uploading images:", error);
    }
  };

  useEffect(() => {
    const fetchImages = async () => {
      try {
        const imgs = await listAll(ref(imageDb, "files"));
        const urls = await Promise.all(
          imgs.items.map(async (item) => await getDownloadURL(item))
        );
        setImgUrl(urls);
      } catch (error) {
        console.error("Error fetching images:", error);
      }
    };

    fetchImages();
  }, []);

  return(
    <div>
      <input
        type="file"
        multiple
        accept="image/*"
        onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
      />
      <button type="button" onClick={handleClick}>Upload</button>
      <br />
      {imgUrl.map((url, index) => (
        <div key={index}>
          <img src={url} alt={`Image ${index}`} style={{width: '200px', margin: '10px'}} />
          <br />
        </div>
      ))}
    </div>
  )
};

export default ImageUploader;

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