React.js使用Axios发送空图像

Question

我正在尝试使用axios在React中将详细信息以及图像发送到电子邮件。但是，当我查看电子邮件时，除图像外，所有详细信息均已正确发送。当我从电子邮件中查看图像时，没有预览，当我下载文件时，系统会告诉我图像为空。

这是我的代码：

const EnterDetailPage = props => {
  const [address, setAddress] = useState("");
  const [name, setName] = useState("");
  const [zip, setZip] = useState("");
  const [email] = useState("email goes here");
  const [userEmail] = useState(auth.email);
  const [imageUrl, setImageUrl] = useState("");
  const [imageFile, setImageFile] = useState(null);
  const [performed, setPerformed] = useState("");
  const [upload, setUpload] = useState(null);

  const handleSubmitDetails = async () => {
    if (isValid) {
      setLoading(true);
      const ref = firebase
        .storage()
        .ref()
        .child(auth.uid);
      const snapshot = await ref.put(imageFile);
      let getImageUrl = await snapshot.ref.getDownloadURL();
      setImageUrl(getImageUrl);
      console.log(getImageUrl);
      axios
        .post(
          "https://us-central1-cccproject-2b2f6.cloudfunctions.net/sendMailToUser",
          {
            zip: zip,
            name: name,
            imageUrl: imageUrl,
            address: address,
            email: email,
            performed: performed,
            userEmail: userEmail
          }
        )
        .then(response => {
          enqueueSnackbar("Detail Send");
          setLoading(false);
          setAddress("");
          setName("");
          setZip("");
          setImageUrl("");
          setImageFile("");
          setPerformed("");
          setUpload("");
        })
        .catch(error => {});
    }
  };
return (
    <div className="w-full flex flex-col justify-center items-center">
      <AppBar position="fixed" className="bg-indigo-400">
        <Toolbar className="justify-between ">
          <LogoName appBar={true} />
          <Button color="inherit" onClick={handleLogout}>
            Logout
          </Button>
        </Toolbar>
      </AppBar>
      <div className="m-auto p-16 sm:px-24 sm:mx-auto max-w-xl">
        <input
          accept="image/*"
          className="hidden"
          id="button-file"
          type="file"
          // onChange={handleUploadChange}
          onInput={handleUploadChange}
          onClick={event => {
            event.target.value = null;
          }}
        />
        <label
          htmlFor="button-file"
          className={`${classes.bigAvatar} mt-8 bg-gray-300 m-auto flex items-center justify-center relative w-128 h-128 rounded-4 a-mr-16 a-mb-16 overflow-hidden cursor-pointer shadow-1 hover:shadow-xl`}
        >
          <div className="absolute flex items-center justify-center w-full h-full z-50">
          </div>
          {imgPreview}
        </label>
        <Typography className="text-xl font-bold my-8">
          Enter your details below
        </Typography>
)}

我在做什么错了？