Javascript 添加多个图像预览和删除

我有一个代码，我上传只有一个图像，并显示它，但我需要上传最多5个图像，并能够删除它们，我不知道如何使它能够上传更多的图像，并能够显示在img标签他们

这将是我的代码，在其中我只能上传一个图像并显示它

import React, { useState } from "react";
    import "./styles.css";
    
    const SingleImageUploadComponent = () => {
      const [file, setFile] = useState(null);
    
      function uploadSingleFile(e) {
        setFile(URL.createObjectURL(e.target.files[0]));
        console.log("file", file);
      }
    
      function upload(e) {
        e.preventDefault();
        console.log(file);
      }
    
      return (
        <form>
          <div className="form-group preview">
            {file && <img src={file} alt="" />}
          </div>
    
          <div className="form-group">
            <input
              type="file"
              className="form-control"
              onChange={uploadSingleFile}
            />
          </div>
          <button
            type="button"
            className="btn btn-primary btn-block"
            onClick={upload}
          >
            Upload
          </button>
        </form>
      );
    };
    
    export default SingleImageUploadComponent;

import React，{useState}来自“React”；
导入“/styles.css”；
常量SingleImageUploadComponent=（）=>{
const[file，setFile]=useState（null）；
函数上传单文件（e）{
setFile（URL.createObjectURL（e.target.files[0]）；
console.log（“文件”，file）；
}
功能上传（e）{
e、 预防默认值（）；
console.log（文件）；
}
返回(
{文件&&}
上传
);
};
导出默认的SingleImageUploadComponent；

正如我前面提到的，我需要上传最多5张图片，并在5个img标签中显示它们，因为它们有我显示它们的css样式

---

如果有人能帮我，那就太好了，非常感谢你

你可以将文件存储在数组中而不是单个文件中并使用它

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [file, setFile] = useState([]);

  function uploadSingleFile(e) {
    setFile([...file, URL.createObjectURL(e.target.files[0])]);
    console.log("file", file);
  }

  function upload(e) {
    e.preventDefault();
    console.log(file);
  }

  function deleteFile(e) {
    const s = file.filter((item, index) => index !== e);
    setFile(s);
    console.log(s);
  }

  return (
    <form>
      <div className="form-group preview">
        {file.length > 0 &&
          file.map((item, index) => {
            return (
              <div key={item}>
                <img src={item} alt="" />
                <button type="button" onClick={() => deleteFile(index)}>
                  delete
                </button>
              </div>
            );
          })}
      </div>

      <div className="form-group">
        <input
          type="file"
          disabled={file.length === 5}
          className="form-control"
          onChange={uploadSingleFile}
        />
      </div>
      <button
        type="button"
        className="btn btn-primary btn-block"
        onClick={upload}
      >
        Upload
      </button>
    </form>
  );
};

export default App;

import React，{useState}来自“React”；
导入“/styles.css”；
常量应用=（）=>{
const[file，setFile]=useState（[]）；
函数上传单文件（e）{
setFile（[…文件，URL.createObjectURL（e.target.files[0]））；
console.log（“文件”，file）；
}
功能上传（e）{
e、 预防默认值（）；
console.log（文件）；
}
函数删除文件（e）{
常量s=file.filter（（项，索引）=>index！==e）；
设置文件；
控制台日志；
}
返回(
{file.length>0&&
file.map（（项目，索引）=>{
返回(
删除文件（索引）}>
删除
);
})}
上传
);
};
导出默认应用程序；

您可以将文件存储在数组中而不是单个文件中并使用它

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [file, setFile] = useState([]);

  function uploadSingleFile(e) {
    setFile([...file, URL.createObjectURL(e.target.files[0])]);
    console.log("file", file);
  }

  function upload(e) {
    e.preventDefault();
    console.log(file);
  }

  function deleteFile(e) {
    const s = file.filter((item, index) => index !== e);
    setFile(s);
    console.log(s);
  }

  return (
    <form>
      <div className="form-group preview">
        {file.length > 0 &&
          file.map((item, index) => {
            return (
              <div key={item}>
                <img src={item} alt="" />
                <button type="button" onClick={() => deleteFile(index)}>
                  delete
                </button>
              </div>
            );
          })}
      </div>

      <div className="form-group">
        <input
          type="file"
          disabled={file.length === 5}
          className="form-control"
          onChange={uploadSingleFile}
        />
      </div>
      <button
        type="button"
        className="btn btn-primary btn-block"
        onClick={upload}
      >
        Upload
      </button>
    </form>
  );
};

export default App;

import React，{useState}来自“React”；
导入“/styles.css”；
常量应用=（）=>{
const[file，setFile]=useState（[]）；
函数上传单文件（e）{
setFile（[…文件，URL.createObjectURL（e.target.files[0]））；
console.log（“文件”，file）；
}
功能上传（e）{
e、 预防默认值（）；
console.log（文件）；
}
函数删除文件（e）{
常量s=file.filter（（项，索引）=>index！==e）；
设置文件；
控制台日志；
}
返回(
{file.length>0&&
file.map（（项目，索引）=>{
返回(
删除文件（索引）}>
删除
);
})}
上传
);
};
导出默认应用程序；

您好，非常感谢您的帮助，一个问题如果我想通过daca图像上传一个标记img，我想怎么做？例如，您好，非常感谢您的帮助，一个问题如果我想通过daca图像上传一个标记img，我想怎么做？例如