如何将图片上传到我的网站并将其设置在我的卡片组件上？

Question

我想通过使用表格接收一些信息，然后通过提交表格根据该信息创建一张卡片，当我上传图像时我无法将其设置为卡片图片并且我遇到了这个错误：

const [imgUrl, setImgUrl] = useState("");


const onChangeHandler = (event) => {
  const file = event.target.files[0];
  console.log(file);
  const reader = new FileReader();
  reader.onload = (file) => {
    setImgUrl(reader.result);
  };
  reader.readAsDataURL(file);
 };


<Form.Group controlId="formFileSm" className="mb-3">
<Form.Label>Upload a picture</Form.Label>
<Form.Control type="file" size="sm" onChange={onChangeHandler} />
</Form.Group>

my Card Component

import React, { Component } from "react";

class Card extends Component {
  constructor(props) {
  super(props);
  }
  render() {
    const items = this.props.items.map((item) => {
      if (item.imgUrl) {
        return (
          <div className="card col-md-2">
            <img src={require(`${item.imgUrl}`)} className="img-fluid" />
            <h4 className="pt-4">name : {item.name}</h4>
            <span className="pb-2">PhoneNumber : {item.phoneNumber}</span>
          </div>
        );
      } else {
        return (
          <div className="card col-md-2">
            <img src={require("../image/3user.jpg")} className="img-fluid" />
            <h4 className="pt-4">name : {item.name}</h4>
            <span className="pb-2">PhoneNumber : {item.phoneNumber}</span>
          </div>
        );
      }
    });
    return (
      <div className="container-fluid row justify-content-center">{items}</div>
    );
  }
}

export default Card;