前端使用vue框架来搭建，后端使用用laravel做api的接口
laravel版本:laravel7.0

mews/captcha扩展地址：https://packagist.org/packages/mews/captcha

1. 引入扩展

composer require mews/captcha

2. 找到config/app.php下的providers，添加

'providers' => [
         // ... 
       Mews\Captcha\CaptchaServiceProvider::class,
]

3.发布配置

$ php artisan vendor:publish

开始
从laravel获取图片验证码

//路由 获取验证码
Route::get('/captcha', 'LoginController@captcha');
// 获取验证码
public function captcha()
{
  return response()->json([
   'status_code' => '200',
   'message' => 'created succeed',
    'url' => app('captcha')->create('default', true)
  ]);
}

接口返回结果

status_code: "200"
url: {
img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
key:"eyJpdiI6IlU2..."
sensitive: false
}

vue前端

<el-form :model="form" ref="captchaForm">
   <el-form-item class="input-prepend" prop="code">
      <el-input placeholder="验证码" v-model="form.captchaCode"></el-input>
      <el-button class="btn-up-resend" type="text" >
      <img style="margin-top: -13px" @click="changeCaptcha" :src="form.captchaImg" alt="图片验证码">
      </el-button>
   </el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
   <el-button type="primary" size="mini" @click="defineCaptcha()">确 定</el-button>
</span>


data() {
  return {
    form: {
     captchaCode: '',
     key: '',
     captchaImg: '',
  },
}

//获取验证码
changeCaptcha() {
  $axios.get(`/api/captcha`).then((result) => {
    this.form.captchaImg = result.data.url.img
    this.form.key = result.data.url.key
  })
}

//登录
login() {
 $axios.post(`/api/login`, {...this.form}).then(response => {
    if (response .status_code === 200) {
    //验证成功............
    } else {
    //验证失败 重新获取验证码
      this.changeCaptcha();
    }   
 })
}

后端代码

表单请求验证

public function login(LoginRequest $request)
{
    //登录处理...
}


//LoginRequest
public function rules()
{
    $rules = [
      'key' => 'required',
       'captchaCode' => 'required|captcha_api:' . request()->input('key')
     ];

     return $rules;
}

public function messages()
{
   return [
     'mobile.required' => '请填写手机号码',
     'mobile.regex' => '请输入正确的手机号码',
     'key.required' => '请点击图片重新获取验证码',
     'captchaCode.required' => '请输入验证码',
     'captchaCode.captcha_api' => '验证码无效',
  ];
}

END

php gd库重新编译安装方法