ReactJS中如何实现选中图片的预览功能？

你的代码核心问题是未正确处理多张图片的FileReader读取逻辑，同时预览渲染时存在数组遍历错误。以下是修正后的完整代码：

import { useState } from 'react';
import Axios from 'axios';
// 假设已导入Form、Label等组件

const YourComponent = ({ shopID, pID, onShowAlert, setMessage, setLoading }) => {
  const [pImg, setPImg] = useState([]);
  const [previewImages, setPreviewImages] = useState([]); // 重命名变量更清晰

  const addImg = (ImagesPostDto) => {
    const data2 = new FormData();
    [...ImagesPostDto].forEach((image) => {
      data2.append("ImagesPostDto", image);
    });
    Axios.post(`/shop/${shopID}/Product/${pID}/Images`, data2)
      .then((res) => {
        if (res.status === 200) {
          setMessage({
            data: `${res.data.MESSAGE}`,
            type: "alert-success",
          });
          onShowAlert();
          // 上传成功后清空预览和文件列表
          setPreviewImages([]);
          setPImg([]);
          document.getElementById('file').value = ''; // 重置文件输入框
        }
      })
      .catch((err) => {
        setMessage({
          data: `${err.response.data.MESSAGE}`,
          type: "alert-danger",
        });
        setLoading(false);
        onShowAlert();
      });
  };

  const handleImageChange = (e) => {
    const selectedFiles = Array.from(e.target.files); // 把FileList转为数组方便遍历
    setPImg(selectedFiles);

    const previewUrls = [];
    selectedFiles.forEach(file => {
      const reader = new FileReader();
      reader.onload = (event) => {
        previewUrls.push(event.target.result);
        // 所有图片读取完成后统一更新预览数组
        if (previewUrls.length === selectedFiles.length) {
          setPreviewImages(previewUrls);
        }
      };
      reader.readAsDataURL(file); // 对单个文件执行读取操作
    });
  };

  const handleProductSubmit = (event) => {
    event.preventDefault();
    addImg(pImg);
  };
  
  return (
    <div>
      <Form onSubmit={handleProductSubmit}>
        <p>
          <Label htmlFor="file">Upload images</Label>
          <input
            type="file"
            id="file"
            onChange={handleImageChange}
            accept="image/png, image/jpg, image/jpeg"
            multiple
          />
        </p>
        <button type="submit">提交图片</button>
      </Form>
      {/* 图片预览区域 */}
      <div className="image-preview">
        {previewImages.length > 0 && previewImages.map((url, index) => (
          <div key={index} className="preview-item">
            <img 
              src={url} 
              alt={`预览图 ${index + 1}`} 
              style={{ width: '150px', height: '150px', objectFit: 'cover', margin: '10px' }} 
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default YourComponent;

关键修复说明： #

• 文件读取逻辑：将FileList转为数组，遍历每个文件单独使用FileReader读取，待所有图片读取完成后统一更新预览数组，避免异步读取导致的状态混乱。
• 预览渲染：遍历previewImages数组渲染每张图片，使用数组索引作为key保证React列表渲染稳定性，同时修正了原代码中src引用错误的问题。
• 体验优化：上传成功后清空预览列表和文件输入框，避免重复提交相同文件。

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