获取二进制流加载验证码

最新推荐文章于 2023-03-15 14:26:30 发布

原创最新推荐文章于 2023-03-15 14:26:30 发布 · 367 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

本文介绍了一个使用React实现的获取验证码图片的组件代码。该组件通过调用后端接口来获取验证码图片，并提供了预览功能和刷新按钮，允许用户在看不清时更换验证码图片。代码展示了如何使用props进行状态管理和事件处理。

queryImg = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'login/captchaImage',
    }).then(res =>{
      if(res){
        this.preView(res);
      }
    })
  };
  
preView = res => {
    if (window.FileReader) {
      let reader = new FileReader();
    reader.readAsDataURL(res.data);
    
    reader.onload = e =>  {
      this.setState({
        src: res.data ? e.target.result : null,
        uuid:res&&res.response&&res.response.headers.get('randomstr'),
      });
    }
    } else {
      alert("Not supported by your browser!");
    }
   }


<Col xs={24} xl={14}>{this.state.src ? (<div className={styles.Button}><img style={{ cursor: 'pointer' ,  width:"50%"}} src={src} alt=''/><a onClick={this.queryImg}>看不清，下一张</a></div>) : null}</Col>