如何通过React Hook Form上传多图至ImgBB并获取图片链接？

你的核心问题在于ImgBB的单文件上传接口仅识别名为image的字段，而你当前用image${i}作为FormData的键名，导致接口无法正确解析多文件；同时ImgBB没有批量上传的单接口，需要为每个文件单独发起上传请求，再收集所有返回的URL。

修改后的完整代码 #

import { useForm } from "react-hook-form";
import { toast } from "react-hot-toast"; // 假设你用的是react-hot-toast

const YourComponent = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const handlePostAd = async (data) => {
    // 将FileList转为数组，方便遍历处理
    const imageFiles = Array.from(data.img);
    const apiKey = process.env.REACT_APP_imgbb_key;

    // 为每个文件创建上传Promise
    const uploadTasks = imageFiles.map(async (file) => {
      const formData = new FormData();
      // ImgBB要求必须用`image`作为文件字段名
      formData.append("image", file);

      const res = await fetch(`https://api.imgbb.com/1/upload?key=${apiKey}`, {
        method: "POST",
        body: formData,
      });

      const result = await res.json();
      if (!result.success) {
        throw new Error(`图片上传失败: ${result.error.message}`);
      }
      // 返回单个图片的URL
      return result.data.url;
    });

    try {
      // 等待所有上传任务完成，收集URL数组
      const imageUrls = await Promise.all(uploadTasks);
      toast.success("所有图片上传完成");
      console.log("图片URL数组:", imageUrls);
      // 这里可以继续处理URL数组，比如提交到你的后端服务
    } catch (err) {
      toast.error(err.message);
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit(handlePostAd)}>
      <div>
        <input
          multiple
          {...register("img", {
            required: "图片不能为空",
          })}
          type="file"
          className="file-input file-input-bordered file-input-error w-full"
        />
        {errors.img && <p className="text-red-500">{errors.img.message}</p>}
      </div>
      <button type="submit">提交上传</button>
    </form>
  );
};

export default YourComponent;

关键说明 #

1. 字段名修正：ImgBB的上传接口仅接受image作为文件字段名，不能自定义为image0/image1这类命名。
2. 批量请求处理：用Promise.all并行处理所有文件的上传请求，确保所有上传完成后再收集结果。
3. 错误处理：添加了异常捕获，单个文件上传失败时会抛出具体错误，避免整个流程静默失败。
4. FileList转数组：React Hook Form返回的data.img是FileList对象，用Array.from转为数组后才能使用map遍历。

内容的提问来源于stack exchange，提问作者Rubayet Islam Season