语义UI使用文件上载来响应进度条

Question

我有一个小文件上传组件，用户从文件系统中选择一个文件并上传（通过REST调用发送）。

我正在尝试从semantic-ui-react实现<Progress>模块，以指示文件发送到端点时的成功/失败。那么最好是根据响应的status做到这一点吗？还是有更好的方法来处理它？

Codesandbox是here

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          file: null,
          fileName: "",
          isUploading: false,
          statusCode: ""
        };
      }

      onFormSubmit = e => {
        e.preventDefault(); // Stop form submit
        this.fileUpload(this.state.file).then(response => {
          console.log(response.data);
        });
      };

      fileChange = e => {
        this.setState(
          { file: e.target.files[0], fileName: e.target.files[0].name },
          () => {
            console.log(
              "File chosen --->",
              this.state.file,
              console.log("File name  --->", this.state.fileName)
            );
          }
        );
      };


  fileUpload = async file => {
    const formData = new FormData();
    formData.append("file", file);
    try {
      axios.post("/file/upload/enpoint").then(response => {
        console.log(response);
        console.log(response.status);
        this.setState({ statusCode: response.status }, () => {
          console.log(
            "This is the response status code --->",
            this.state.statusCode
          );
        });
      });
    } catch (error) {
      console.error(Error(`Error uploading file ${error.message}`));
    }

    const data = JSON.stringify({
      uploadData: file
    });
    console.log(data);
  };

  render() {
    const { statusCode } = this.state;
    const panes = [
      {
        menuItem: "Import ",
        render: () => (
          <Tab.Pane attached={false}>
            <Message>Some random message idk.</Message>
            <Form onSubmit={this.onFormSubmit}>
              <Form.Field>
                <label>File input & upload </label>
                <Button as="label" htmlFor="file" type="button" animated="fade">
                  <Button.Content visible>
                    <Icon name="file" />
                  </Button.Content>
                  <Button.Content hidden>Choose a File</Button.Content>
                </Button>
                <input
                  type="file"
                  id="file"
                  hidden
                  onChange={this.fileChange}
                />
                <Form.Input
                  fluid
                  label="File Chosen: "
                  placeholder="Use the above bar to browse your file system"
                  readOnly
                  value={this.state.fileName}
                />
                <Button style={{ marginTop: "20px" }} type="submit">
                  Upload
                </Button>
                {statusCode && statusCode === "200" ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    success
                    active
                    progress
                  />
                ) : statusCode && statusCode === "500" ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    error
                    active
                    progress
                  />
                ) : null}
              </Form.Field>
                </Form>
              </Tab.Pane>
            )
          }
        ];
        return (
          <Segment style={{ padding: "5em 1em" }} vertical>
            <Divider horizontal>OFFLINE USAGE</Divider>
            <Tab menu={{ pointing: true }} panes={panes} />
          </Segment>
        );
      }
    }

Answer 1

我有一个主要针对减速器的建议解决方案。你需要做的是你必须派遣一个加载动作。

转到我的Github回购：Semantic UI Indicator

您将能够通过回购并了解这一点。这只是一种不同的方法。所以可以有很多方法来做到这一点。我使用了一个简单的语义加载器，以防你可以将相同的东西应用到进度条。

Answer 2

我更改了fileUpload函数以使用服务器响应中的statusCode更新response.status状态变量。

  fileUpload = async file => {
    const formData = new FormData();
    formData.append("file", file);
    try {
      axios.post("/file/upload/enpoint").then(response => {
        console.log(response);
        console.log(response.status);
        this.setState({ statusCode: response.status }, () => {
          console.log(
            "This is the response status code --->",
            this.state.statusCode
          );
        });
      });
    } catch (error) {
      console.error(Error(`Error uploading file ${error.message}`));
    }
  };

然后在渲染中我检查statusCode是200还是500，我会更改它以包含更合适的状态代码，但你明白了。

{statusCode && statusCode === 200 ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    success
                    progress
                  >
                    File Upload Success
                  </Progress>
                ) : statusCode && statusCode === 500 ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    error
                    active
                    progress
                  >
                    File Upload Failed
                  </Progress>
                ) : null}

对于那些想要查看的人，可以找到更新的codeandbox here。