调用后端接口返回的验证码数据,返回的是乱码,求大佬解惑! 不知道该如何解决

yuanwenproject
  • 7

问题描述

调用后端接口返回的验证码,返回的是乱码

问题出现的环境背景及自己尝试过哪些方法

本人是刚入门前端的菜鸟,想实现验证码的功能,又苦于不会后端,所以在网上找了一个验证码的api,如下:

api网址为:http://api.yesapi.cn/docs-api...
必填参数为:app_key,s
完整的接口请求地址为:http://hn216.api.yesapi.cn/?s...

<script>
import axios from "axios";
export default {
  data() {
    return {
      verificationImg: "",
      ruleForm: {
        verification: "",
      },
    };
  },
  methods: {
    acquireVerification() {
      axios
        .post(
          "/api/?s=App.Captcha.Create&return_data=0&return_format=output&app_key=DB432E4EAEDA50542C763C808A0E143A",
          { responseType: "arraybuffer" }
        )
        .then( data=> {
          console.log(data.data);
          this.verificationImg = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          console.log(this.verificationImg);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
  mounted() {
    this.acquireVerification();
  },
};
</script>

但最终得到的却只是一个前缀:

相关代码

粘贴代码文本(请勿用截图)
完整代码:

<template>
  <div class="checkAndErwei">
    <el-form ref="form" label-width="80px">
      <el-form-item label="验证码" prop="name">
        <el-input
          style="width: 147px"
          v-model="ruleForm.verification"
          placeholder="请填写验证码"
        ></el-input>
        <div class="verification">
          <img
            :src="verificationImg"
            alt=""
            @click="acquireVerification"
          />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      verificationImg: "",
      ruleForm: {
        verification: "",
      },
    };
  },
  methods: {
    acquireVerification() {
      axios
        .post(
          "/api/?s=App.Captcha.Create&return_data=0&return_format=output&app_key=DB432E4EAEDA50542C763C808A0E143A",
          { responseType: "arraybuffer" }
        )
        .then( data=> {
          console.log(data.data);
          this.verificationImg = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          console.log(this.verificationImg);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
  mounted() {
    this.acquireVerification();
  },
};
</script>
<style lang="less" scoped>
.checkAndErwei {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.verification {
  position: absolute;
  right: 0px;
  top: 0px;
}
</style>

又因为该接口需要跨域,所以在vue.config.js文件中进行了相应跨域配置:

module.exports = {
    runtimeCompiler: true,
    devServer: {
      open: true,
      host: 'localhost',
      port: 8080,
      proxy: {
          '/api': {
              target: 'http://hn216.api.yesapi.cn',
              changeOrigin: true,
              pathRewrite: {
                  '^/api': '/'
              }
          }
      }
  },
  }

你期待的结果是什么?实际看到的错误信息又是什么?

期望值是得到一个临时的url链接,将其作为img标签的src属性的属性值,但实际却并没有得到完整的url链接,求大佬帮帮我!!!

回复
阅读 2.3k
2 个回答
✓ 已被采纳

在接口文档中有指出,在调用接口时需要传入 return_format=data 作为参数,从而使接口返回含有 base64 的图片信息。

return_format:验证码返回格式,output 表示直接输出验证码图片,data 表示返回 base64 后的验证码图片数据。

也就是说调用接口至少是以下格式:

// request
GET http://hn216.api.yesapi.cn/?s=App.Captcha.Create
  &app_key=your-app-key
  &return_format=data

// response
{
  ret: 200,
  data: {
    err_code: 0,
    err_msg: "",
    captcha_id: "...",
    captcha_img: "...",
  },
  msg: "..""
}

使用 jQuery 作为示例,如下所示:
image.png
return_format=data 返回的结果已经是 base64 字符串,无需进行额外的处理。

不用这么麻烦 ,返回的数据直接就是图片,所以你用img标签显示即可

<img :src="url">

url=http://hn216.api.yesapi.cn/?s=App.Captcha.Create&app_key=DB432E4EAEDA50542C763C808A0E143A
其实就是

`<img src="http://hn216.api.yesapi.cn/?s=App.Captcha.Create&app_key=DB432E4EAEDA50542C763C808A0E143A">


当然,你非要ajax也可以,你把响应数据改成 blob,然后 URL.createObjectURL(blob) 就能拿到一个 bloburl,然后把它给img的src就可以显示出来了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏