添加多张图片预览和删除 React

Question

我有一个代码，我只上传 1 张图片并显示它，但我需要上传最多 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;

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

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

Answer 1

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

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;