图像文件的线性进度栏上传具有动态值MUI

Question

我正在尝试上传图片，并根据上传的文件显示进度。 我正在为上传的每个文件登录， 假设我有7个文件并在上传时获取7个日志，我如何根据IT设置线性进度栏的百分比（移动进度）

import * as React from "react";
import LinearProgress, {
LinearProgressProps
} from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

function LinearProgressWithLabel(
props: LinearProgressProps & { value: number }
) {
 return (
  <Box sx={{ display: "flex", alignItems: "center" }}>
  <Box sx={{ width: "100%", mr: 1 }}>
    <LinearProgress variant="determinate" {...props} />
  </Box>
  <Box sx={{ minWidth: 35 }}>
    <Typography variant="body2" color="text.secondary">{`${Math.round(
      props.value
    )}%`}</Typography>
  </Box>
 </Box>
 );
 }

  export default function LinearWithValueLabel() {
  const [progress, setProgress] = React.useState(10);

  React.useEffect(() => {
  const timer = setInterval(() => {
  setProgress((prevProgress) =>
    prevProgress >= 100 ? 10 : prevProgress + 10
  );
   }, 800);
  return () => {
  clearInterval(timer);
 };
 }, []);

 return (
<Box sx={{ width: "100%" }}>
  <LinearProgressWithLabel value={progress} />
 </Box>
);
}

codesandbox： https://codesandbox.io/s/nemeless-fast-8m1ien?file=/src/src/app.tsx：0-- 1124

Answer 1

您可以使用一个数组状态，该数组状态可以保留您上传的每个文件的进度。由于这是一个示例，默认状态已经由7个文件组成，其相应的进度。

您可能需要在实际使用中将默认值设置为空对象{}。这样，您仍然可以如下步骤添加上传的文件进展。

中所示。

  const [progressArray, setProgressArray] = React.useState({
    file1: 0,
    file2: 0,
    file3: 0,
    file4: 0,
    file5: 0,
    file6: 0,
    file7: 0
  });

更新该状态将看起来像这样，覆盖相应的文件进度file1：

  setProgressArray((prev) => ({
    ...prev,
    file1: prev.file1 >= 100 ? 10 : prev.file1 + 10
  }));

现在在您的linearprogress中，我们总结了所有进度， divide 要在州上载的文件数。由于这是一个部门，因此我们排除空对象状态并返回0。live

  <LinearProgressWithLabel
    value={
      Object.keys(progressArray).length
        ? Object.values(progressArray).reduce((a, b) => a + b, 0) /
          Object.keys(progressArray).length
        : 0
    }
  />

demo