如何正確實現進度條？

Question

所以我在 React 和 ChakraUI 上做這個項目來顯示圖像。 我的要求是每當有人上傳圖片時顯示進度條。 我的問題是，當我重新加載頁面時，進度條第一次工作正常例如我 select 一個圖像，選擇圖像后我按下上傳按鈕並顯示進度條。 只有第一次可以正常工作。 之后，只要我只是 select 圖像，進度條就已經滿了。 之后，單擊上傳按鈕即可上傳。 如何防止這種情況發生？

import * as React from "react";

import { Button, Flex, Progress } from "@chakra-ui/react";
import { useState } from "react";
import axios from "axios";

import { baseUrl } from "../config";

function Upload(props) {
  const [selectedFile, setSelectedFile] = useState(null);
  const [curretFile, setCurrentFile] = useState(null);
  const [progress, setProgress] = useState(0);
  const [error, setError] = useState(null);

  function fileSelectedHandler(event) {
    setSelectedFile(event.target.files[0]);
  }

  const fileUploadHandler = (event) => {
    const fd = new FormData();
    fd.append("image", selectedFile, selectedFile.name);

    axios
      .post(`${baseUrl}/upload`, fd, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        onUploadProgress: (event) => {
          setProgress(Math.round((100 * event.loaded) / event.total));
        },
      })
      .then((res) => {
        props.onSuccessfulUpload();
        setSelectedFile(null);
        setError(null);
      })
      .catch((error) => {
        setSelectedFile(null);
        setError(error);
      });
  };

  const fileData = () => {
    if (selectedFile) {
      if (
        selectedFile.type === "image/jpeg" ||
        selectedFile.type === "image/png"
      ) {
        return (
          <div>
            {error && <div>file too large!!</div>}
            <Button colorScheme='teal' size='sm' onClick={fileUploadHandler}>
              Upload!
            </Button>
            <Progress value={progress} min='0' max='100' width='40' />
          </div>
        );
      } else {
        return (
          <div>
            <h4>Please choose an image to upload</h4>
          </div>
        );
      }
    } else {
      return (
        <div>
          <h4>Choose Photos</h4>
        </div>
      );
    }
  };

  return (
    <div>
      <input type='file' onChange={fileSelectedHandler} />
      {fileData()}
    </div>
  );
}

export default Upload;

Answer 1

忘記把進度state設置為0了，謝謝提醒我把進度設置為零的小伙伴。

  .then((res) => {
        props.onSuccessfulUpload();
        setSelectedFile(null);
        setError(null);
        setProgress(0); //setProgress to zero
      })