React JS已设置multiple属性上传多张图片但UI界面不显示问题

问题根因 #

1. 无法多选上传 #

你当前的handleChange函数只处理了e.target.files[0]（选中的第一个文件），multiple属性返回的所有选中文件都存储在e.target.files类数组对象中，需要遍历全部文件完成批量处理。

2. 图片无法正常渲染 #

列表渲染的map回调存在语法错误：回调中直接用{}包裹语句会被识别为对象声明，没有正确返回img元素，同时循环项缺少必填的key属性。

修正后代码 #

输入框部分 #

<input 
  type="file" 
  title="" 
  className={styles.inputFile} 
  multiple 
  onChange={handleChange} 
/>

状态声明部分 #

const [formData, setFormData] = useState({
  orgId: "6114285831310bfd5b09c28178e",
  orgWallpaper: [],
  // 如果需要向后端传原始文件，可新增字段存储
  // orgWallpaperFiles: []
}); 

文件选择处理函数 #

const handleChange = (e) => {
  if (e.target.files?.length) {
    // 转数组批量生成预览地址
    const newPreviewList = Array.from(e.target.files).map(file => URL.createObjectURL(file))
    // 若需要存原始文件可新增：const newFileList = Array.from(e.target.files)
    setFormData((form) => ({
      ...form,
      orgWallpaper: [...form.orgWallpaper, ...newPreviewList],
      // orgWallpaperFiles: [...form.orgWallpaperFiles, ...newFileList]
    }));
  }
};

列表渲染部分 #

{formData?.orgWallpaper?.map((item, index) => (
  <img 
    key={index}
    className={`${styles.wallpapers} ${styles.active}`} 
    src={item} 
    alt="上传的壁纸" 
  />
))}

注意事项 #

• 使用URL.createObjectURL生成的预览地址会占用内存，组件卸载时建议调用URL.revokeObjectURL批量释放，避免内存泄漏
• 向后端提交文件时需要使用FormData对象，将原始文件append进去提交，不能直接提交预览地址

内容的提问来源于stack exchange，提问作者Srivathsa k m