React - 每个文件的上传进度答案

【问题标题】：React - File upload progress for an each oneReact - 每个文件的上传进度
【发布时间】：2020-02-20 07:16:24
【问题描述】：

我m running into a problem related with file uploading. Im 基于 react-dropzone 库制作了一个 Dropzone 组件。我需要上传文件并显示每个文件的上传进度。此外，我想将我上传的文件（结果）保留在区域中，并且只能通过用户单击删除。

这是我的退货声明。

return (
    <Container {...getRootProps({ isDragActive, isDragAccept, isDragReject })}>
      <input {...getInputProps()} />
      {filesToRender || (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
    </Container>
  );

在我将一些文件拖入区域后，它会调用此函数：

 const onDrop =  acceptedFiles => {
    for (const file of acceptedFiles) {
      const formData = new FormData();
      formData.append("file", file);
       axios.post(`http://localhost:8080/files`, formData, {
        headers: {
          Authorization:
            "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJmb28iLCJleHAiOjE1ODIxNzc2NjAsImlhdCI6MTU4MjE0MTY2MH0.CWtDOIrFoitXHDeXCha0mT3HVyvTrwg8nXhsNaLkZVs"
        },
        onUploadProgress: progressEvent => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          file.progress = percentCompleted;
          // set progress for an each file
        }
      });
    }
    setFiles([...files, ...acceptedFiles]);
  };

我想设置文件，然后在上传期间以某种方式更改它。

我的filesToRender：

const filesToRender =
    files.length &&
    files.map((file, index) => {
      return (
        <File key={index}>
          <FileInfo>
            {file.name}
            {file.progress} //get progress from an each file object
          </FileInfo>
          <Button onClick={event => removeFile(event, index)}>
            Убрать файл
          </Button>
        </File>
      );
    });

我该怎么做？ setFiles 是异步的，所以我在重置它时遇到了问题。

【问题讨论】：

标签： reactjs react-hooks react-dropzone

【解决方案1】：

进度更新后需要更新状态：

const onDrop = (acceptedFiles) => {
    acceptedFiles.map((file, index) => {
        const formData = new FormData();
        formData.append("file", file);
        axios.post(`http://localhost:8080/files`, formData, {
            headers: {
                Authorization:
                    "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJmb28iLCJleHAiOjE1ODIxNzc2NjAsImlhdCI6MTU4MjE0MTY2MH0.CWtDOIrFoitXHDeXCha0mT3HVyvTrwg8nXhsNaLkZVs",
            },
            onUploadProgress: (progressEvent) => {
                const percentCompleted = Math.round(
                    (progressEvent.loaded * 100) / progressEvent.total
                );
                file.progress = percentCompleted;
                // set progress for an each file

                setFiles((prevFiles) => {
                    if (prevFiles[index]) {
                        prevFiles[index] = file;
                    }

                    return [...prevFiles];
                });             
            },
        });
    });

    setFiles([...files, ...acceptedFiles]);
};

【讨论】：