获取图片验证码

flask后端

#captcha包连接链接：https://pan.baidu.com/s/1yaGTX6speZH0l_4b1hjjIQ     #
#提取码：xmod          #

# 安装 pip install pillow
# 在captcha文件夹放到utils下面（captcha压缩包解压后全部放进captcha文件夹中）
from flask import Flask,make_response
from utils.captcha.captcha import captcha
app = Flask(__name__)

@app.route('/getpic')
def getpic():
    name, text,image=captcha.generate_captcha()  # text就是图片中的文字直接print（text），就能看到
    res = make_response(image)   # make_response返回内容如response = make_response('<h2>羞羞哒</h2>')，render_response返回页面如 temp = render_template('hello.html')， response = make_response(temp)
   
    res.content_type='image/png'
    return res
    
app.config['JSON_AS_ASCII'] = False
CORS(app)

if __name__ == '__main__':
    app.run(debug=True)
 

vue前端

// 要安装 npm install uuid --save
<template>
<div>
    <img :src="imageurl" alt="图形验证码" @click="getImagecode">
</div>
</template>
<script>
import {v4 as uuid4} from 'uuid'
export default {
name: "register"
,
  data(){
    return{
    imageurl:'',

    }
  },
  methods:{
    //获取验证 图品
    getImagecode(){
      let uuid = uuid4()
      this.imageurl='http://127.0.0.1:5000/getpic?uuid='+uuid
    },
  
  },
  mounted() {
  this.getImagecode()
  }
}
</script>