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

Question

问题描述

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

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

本人是刚入门前端的菜鸟,想实现验证码的功能,又苦于不会后端,所以在网上找了一个验证码的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链接,求大佬帮帮我!!!

Answer 1

在接口文档中有指出，在调用接口时需要传入 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 作为示例，如下所示：

return_format=data 返回的结果已经是 base64 字符串，无需进行额外的处理。

Answer 2

不用这么麻烦 ，返回的数据直接就是图片，所以你用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就可以显示出来了。