如何上传多张图片到imgbb并通过响应获取链接？

Question

我正在通过react-form-hooks获取表单数据

 <div>
    <input multiple {...register("img", {
                        required: "Image is Required",
                      })}
                  type="file"
                      className="file-input file-input-bordered file-input-error w-full"
                    />
                  </div>

但是我无法将多个图像文件附加到 formData 并将我发送到 imgBB 来获取图像 URL

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

  const handlePostAd = (data) => {
    const image = data.img;

    const formData = new FormData();

    for (let i = 0; i < image.length; i++) {
      formData.append(`image${i}`, image[i]);
    }

    const url = `https://api.imgbb.com/1/upload?key=${process.env.REACT_APP_imgbb_key}`;

    fetch(url, {
      method: "POST",
      body: formData,
    })
      .then((res) => res.json())
      .then((imgData) => {
        toast.success("Image uploaded");
        console.log(imgData);
      });
  };

我期待通过文件输入上传到 imgBB 的图像 URL 链接数组

Answer 1

我也在尝试做同样的事情，这是你的解决方案

创建此组件，以验证并上传图片到imgBB

import sendAlert from "./sendAlert";
import uploadImage from "./uploadImage";
import { v4 as uuidv4 } from 'uuid';
const validateAndUpload = async (imageFiles) => {

const uploadPromises = [];

for (let i = 0; i < imageFiles.length; i++) {
    const imageFile = imageFiles[i];

    if (!imageFile) {
        continue; // Skip empty or undefined files
    }

    if (!imageFile.type.startsWith('image/')) {
        sendAlert(`Invalid image file (${i + 1}): Please select a valid image file.`, "error");
    } else if (imageFile.size > process.env.REACT_APP_MAX_IMAGE_SIZE_IN_BYTES) {
        sendAlert(`Image file (${i + 1}) size exceeds the allowed limit.`, "error");
    } else {
        const uploadPromise = (async () => {
            try {
                const data = await uploadImage(imageFile);
                const img = new Image();
                img.src = data.imageUrl;
                await new Promise((resolve) => (img.onload = resolve));

                return {
                    src: data.imageUrl,
                    key: uuidv4()
                };
            } catch (error) {
                throw new Error(`Failed to upload image (${i + 1})`);
            }
        })();

        uploadPromises.push(uploadPromise);
    }
}

try {
    const updatedArray = await Promise.all(uploadPromises);
    return updatedArray;
} catch (error) {
    sendAlert(error.message, "error");
    return [];
}
   };

    export default validateAndUpload

对于 uploadImage() 函数使用这个

import axios from "axios";
import sendAlert from "./sendAlert";

const uploadImage = async (img) => {
try {
    let myApiKey = process.env.REACT_APP_IMGBB_API_KEY
    let formData = new FormData()
    formData.append('image', img)
    const { data } = await axios.post(`https://api.imgbb.com/1/upload? 
key=${myApiKey}`,formData)
    let imageUrl = data.data.display_url
    let deleteUrl = data.data.delete_url
    return {imageUrl,deleteUrl }
} catch (error) {
    sendAlert(error, "error")
    return null
}
};

export default uploadImage

这就是如何使用 validateAndUpload 函数

  const register = async (e) => {
    const imageFiles = e.target.files;
    let updatedArrayToBeSubmit = [...imagesArray];
    setImageLoading(true)
    await validateAndUpload(imageFiles).then((imgObjs) => {
      updatedArrayToBeSubmit = [...updatedArrayToBeSubmit, ...imgObjs];
    })
    .catch((error) => {
        sendAlert("Image upload and processing failed:", "error")
     });
     setImagesArray(updatedArrayToBeSubmit);
   };