reactjs - 在反应js中添加多个图像

Question

我正在做一个项目，我有一个页面，您应该可以在其中添加图像。一件一件地完美运作。现在我想让能够多次添加和上传。我不想使用任何库来上传图片。

  const onFileChange = (e) => {
    const reader = new FileReader();
    reader.onload = () => {
      if (reader.readyState === 2) {
        setPreview(reader.result);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
    if (e.target.files[0]) {
      setOver(true);
    }

    const copy = [...image];
    copy.push(e.target.files[0]);
    setImage([...copy]);
  };
  const onFileUpload = () => {
    const formdata = new FormData();
    image.forEach((elem) => {
      formdata.append("data", elem);
    });
    formdata.append("id_grobnog_mjesta", Id);

    addImage(formdata);
  };

  const addImage = async (data) => {
    try {
      setIsLoading(true);
      const response = await apiRequest({
        method: "post",
        url: `spisak-srebrenica/upload`,
        headers: {
          Authorization: `Bearer ${token}`,
        },
        data,
      });
      if (response.data.success) {
        getVictimImage();
      }
      setIsLoading(false);
      setImage([]);
    } catch (err) {
      setIsLoading(false);
      setImage([]);
    }
  };

上传组件：

 <Upload>
      <BiImageAdd size={50} opacity={0.5} />
      <input type="file" onChange={onFileChange} />
      <div className="items">
        <p>Dodajte sliku</p>
        <span className="format">PNG,JPG,GIF do 10MB</span>
      </div>
    </Upload>

Answer 1

添加多个属性

<input type="file" id="files" name="files" multiple>

https://www.w3schools.com/tags/att_input_multiple.asp