react添加验证码图片

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

介绍

前端在做项目时，经常会有登陆注册等功能，就会用到校验码，而我们经常用到的校验码往往是一张图片，就像上面这张一样。这里我们将介绍前端如何获取校验码图片信息，并展示图片，最后提交信息的过程。（后端具体的图片的生成和图片的校验这里不介绍，后端请上别处看看。）

获取图片信息

首先，在react的componentDidMount中，我们需要获取调用后台接口，获取图片的信息。我们使用的是base64格式，后台传回来的数据格式长这样：{img: "data:image/png;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAs……”} 然后我们用一个状态存以下这个数据。

this.setState({ image: res.data.img });

展示图片

接下来，我们需要将base64格式的图片展示在页面中，我使用的是img标签，将我们获取到的数据放到标签的src属性中即可。

<img
  src={this.state.image}
  width={'80rem'}
  onClick={this.changeImage}
/>

提交信息

我这里是在登录时使用到的校验码，所以提交时，校验码的值就直接放在form表单中，一并提交即可。

点击刷新

项目可能还会有校验码定时刷新的需求，所以，我们还要在图片上加一个点击事件。当点击图片时，可以实现校验码图片的刷新。

刚才我们已经在img标签中加入了 onClick={this.changeImage} 事件，现在将对应的函数添加上去。我们再调用一次后端校验码的接口，然后将图片信息放入state中，实现图片的刷新。

  changeImage = () => {
    api.code().then((res) => {  //这里是api接口
      // console.log('验证码数据：', res.data.img, res.data.sessionId);
      this.setState({ image: res.data.img});
    });
  };