基于React、Next.js与Redux-Saga的多图片上传功能改造方案咨询

我来帮你梳理下怎么修改代码实现多图片上传功能，你的核心问题在于当前只处理了选中的第一张图片，我们需要把逻辑改成遍历所有选中的文件并逐个（或批量）上传。下面是具体的修改步骤和代码示例：

1. 修改文件选择处理函数 #

当前代码只取了event.target.files[0]，我们需要遍历event.target.files这个FileList对象，对每个文件执行预览和上传操作。另外，为了避免重复上传同一文件，我们可以在所有上传完成后再重置input的值，同时管理disabled状态（比如在所有文件开始上传时禁用按钮，全部完成后恢复）。

修改后的onChangeFile函数：

const inputFile = React.useRef(null);
const [uploadCount, setUploadCount] = React.useState(0);

const onChangeFile = event => {
  event.stopPropagation();
  event.preventDefault();
  const files = Array.from(event.target.files); // 将FileList转为数组方便遍历

  if (files.length === 0) return;

  // 开始上传时禁用按钮，并记录需要上传的文件数量
  set_disabled(true);
  setUploadCount(files.length);

  // 定义统一的上传完成/失败后的状态更新逻辑
  const updateUploadStatus = () => {
    setUploadCount(prev => {
      const newCount = prev - 1;
      if (newCount === 0) {
        set_disabled(false);
        event.target.value = null; // 重置input，允许再次选择相同文件
      }
      return newCount;
    });
  };

  files.forEach(image => {
    // 生成临时预览URL并通知父组件
    const temp = URL.createObjectURL(image);
    onImageSelect && onImageSelect(temp);

    // 调用Redux-Saga的上传方法
    dispatch(
      post.uploadImage({
        fileObject: image,
        callback: source_url => {
          imageHandler(source_url);
          onImageUploaded && onImageUploaded();
          updateUploadStatus();
          // 可选：释放临时URL内存
          URL.revokeObjectURL(temp);
        },
        onError: () => {
          // 新增错误处理，避免按钮一直禁用
          console.error(`图片 ${image.name} 上传失败`);
          updateUploadStatus();
          URL.revokeObjectURL(temp);
        },
      })
    );
  });
};

2. 确认JSX部分的配置 #

你的JSX已经正确添加了multiple属性，这部分无需修改，确认如下：

<>
  <input accept='image/*' type='file' ref={inputFile} style={{ display: 'none' }} onChange={onChangeFile} multiple />
  <Box clone color='#666'>
    <IconButton size='small' onClick={() => { inputFile.current.click(); }} >
      <WallpaperOutlinedIcon />
    </IconButton>
  </Box>
</>

3. 可选：批量上传优化 #

如果你的后端支持批量上传（一次请求上传多个文件），可以修改Saga中的上传逻辑，用FormData一次性打包所有文件，这样能减少请求次数：

// 示例：批量上传的dispatch逻辑（替换forEach部分）
const formData = new FormData();
files.forEach(image => {
  formData.append('images', image);
  const temp = URL.createObjectURL(image);
  onImageSelect && onImageSelect(temp);
});

set_disabled(true);
dispatch(
  post.uploadImages({
    formData,
    callback: sourceUrls => {
      sourceUrls.forEach(url => imageHandler(url));
      onImageUploaded && onImageUploaded();
      set_disabled(false);
      event.target.value = null;
      // 清理所有临时URL
      files.forEach(image => URL.revokeObjectURL(URL.createObjectURL(image)));
    },
    onError: () => {
      console.error('批量上传失败');
      set_disabled(false);
      event.target.value = null;
    }
  })
);

这样就能完整实现多图片上传的功能了，你可以根据后端接口的支持情况选择逐个上传或批量上传的方式，同时可以根据业务需求添加更多用户提示（比如上传进度、失败提示）。

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