Vue前端接收后端返回的图片、验证码图片

柔光的暖阳◎ 2022-11-11 05:16 178阅读 0赞

[https://blog.csdn.net/qq\_43477721/article/details/106100824][https_blog.csdn.net_qq_43477721_article_details_106100824]

做登录或者注册的时候，会用到验证码，前端会接收后端发的验证码图片

![在这里插入图片描述][202005131620196.png_pic_center]

就像这样的

<el-form-item label="验证码" prop="name">
      <el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input>
      <div class="verification">
        <img :src="this.verificationImg" alt="" @click="acquireVerification">
      </div>
    </el-form-item>

data () {
      return {
        verificationImg: '',
        ruleForm: {
          verification: ''
        }
    },
    
    acquireVerification () {
    	// {responseType: 'blob'} ，不加这个返回的就是乱码
        //直接获取
      axios.get('/api/verifyCode', {responseType: 'blob'}).then((response) => {
        console.log(response.data)
        this.verificationImg = window.URL.createObjectURL(response.data)
        console.log(this.verificationImg)
      })
        //加参数的
        axios({
          method: "get",
          url: "/purchase/captcha.jpg",
          params: {
            uuid:this.loginForm.uuid,
          },
          responseType: "blob",
        })
          .then(response => {
            console.log(response.data);
            this.verificationImg = window.URL.createObjectURL(response.data)
          })
          .catch(error => {
            console.log(error.data);
          });
    
          }
    }
    
    
    mounted () {
      this.acquireVerification()
    }

[https_blog.csdn.net_qq_43477721_article_details_106100824]: https://blog.csdn.net/qq_43477721/article/details/106100824
[202005131620196.png_pic_center]: /images/20221022/8664d8c87b904101a3714da1f0223592.png