vue怎么显示后台返回的svg图片，svg-captcha生成验证码返给前端，koa+vue+svg-captcha

提示：html可以直接显示svg图片，但是vue会把后台返回的svg数据当成字符串进行处理，需要把svg数据解析成svg标签，这就需要用到v-html了

---

前言

vue怎么显示后台返回的svg图片，svg-captcha生成验证码返给前端，koa+vue+svg-captcha

一、vue如何显示svg

html可以直接显示svg图片，但是vue会把后台返回的svg数据当成字符串进行处理，需要把svg数据解析成svg标签，这就需要用到v-html，把字符串解析成html片段放入当前容器中

<div v-html="imgCodeUrl"></div>

二、使用步骤

1.vue中Login.vue

代码如下（示例）：

<template>
  <div class="login_box">
    <div class="login_list">
      <el-form
        :model="user"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="80px"
        class="login_form"
      >
        <el-form-item v-if="loginType='regist'" label="验证码" prop="imgCode" class="login_list_item">
           <div class="login_item">
            <el-input v-model.number="user.imgCode"></el-input>
            <div  class="login_item_img" v-html="imgCodeUrl" @click="getImgCode"></div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getImgCode} from "@/axios/index";
export default {
  name: "Login",
  data() {
    var validateImgCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      imgUrl: null,
      msg: "用户注册",
      loginType: "regist",
      imgCodeUrl:null,
      user: {
         imgCode: "",
      },
      rules: {
        imgCode: [{required: false},{ validator: validateImgCode, trigger: "blur" }],
      },
    };
  },
  created(){
    this.getImgCode();
  },
  methods: {
     getImgCode(){
      getImgCode().then(res=>{
        this.imgCodeUrl = res.data.svg;
      })
    }
  },
};
</script>
<style scoped lang="scss">
.login_box {
  position: relative;
  height: 100%;
  .login_list {
    width: 400px;
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .login_title {
      font-size: 16px;
      text-align: center;
    }
    .login_item{
      display: flex;
      .el-button.is-round{
        padding: 0 14px;
        margin-left: 30px;
        height: 26px;
        position: relative;
        top: 8px;
      }
      .login_item_img{
        height: 40px;
        width: 160px;
        margin-left: 30px;
      }
    }
  }
}
</style>
<style>
 
.login_box .login_list .el-form-item__label{
  text-align: justify;
  height: 40px;
  overflow: hidden;
}
.login_box .login_list .el-form-item__label::after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
}
</style>

2.vue中axios.js

代码如下（示例）：

import axios from 'axios';
import { Loading, Message } from 'element-ui';

let urlData = { basicUrl: "http://127.0.0.1:3002" }

let loading;

const instance = axios.create({
  baseURL: urlData.basicUrl,
  timeout: 1000,
  headers: { "X-Requested-With": "XMLHttpRequest" },
  withCredentials: false,
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  loading = Loading.service({
    lock: true, // 是否锁屏
    text: '正在加载...', // 加载动画的文字
    spinner: 'el-icon-loading', // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.3)', // 背景颜色
  })
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  loading.close();
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export const getImgCode = async () => {
  return instance.get('/getImgCode');
}


export default instance;

3.koa中routes.js

代码如下（示例）：

import Router from 'koa-router';
import fs, { readFileSync } from 'fs';
import { phoneCode } from './phoneCode.js'

const router = new Router();

const getImgCode = async ctx=>{
     let svg = svgCaptcha.create({
         height:40,
         width:160,
         size : 4,
         color : 'blue',
         background:'#ccc',
         noise : 2,
     });
     ctx.session.imgCode = svg.text;
     ctx.body = {
         code:200,
         data:{svg:svg.data},
         msg:'success'
     }
 }
router.get('/getImgCode ');

export default router;

4.koa中app.js

代码如下（示例）：

import koa from 'koa';
import cors  from 'koa-cors';
import router from './routes/routes.js';
import staticFiles from 'koa-static';
import koaBody from 'koa-body';
import session from 'koa-session'

import path from 'path';

const __dirname = path.resolve();
const app = new koa();

app.use(cors({ // 指定一个或多个可以跨域的域名
    origin: function (ctx) { // 设置允许来自指定域名请求
        if (ctx.url === '/') {
            return "*"; // 允许来自所有域名请求, 这个不管用
        }
        // return 'http://localhost:8000'; // 这样就能只允许 http://localhost:8000 这个域名的请求了
        return '*'; // 这样就能只允许 http://localhost:8000 这个域名的请求了
    },
    maxAge: 5, // 指定本次预检请求的有效期，单位为秒。
    credentials: true,  // 是否允许发送Cookie
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],  // 设置所允许的HTTP请求方法
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],  // 设置服务器支持的所有头信息字段
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] // 设置获取其他自定义字段
}))

const sessionConfig = {
    key: 'koa:sess',   // cookie的key,默认koa:sess
    maxAge: 1000*6,    // 过期时间，毫秒ms
    autoCommit: true,  // 提交到响应头
    overwrite: true,   // 重写
    httpOnly: true,    // 无法获得Cookie信息
    signed: true,      // 签名
    rolling: true,     // 每次刷新
    renew: false,      // 快过期刷新
};
app.keys = ["long long age"];          // signed签名key
app.use(session(sessionConfig, app));  //第二个参数是app ----------------

//解析formdata过来的数据
app.use(koaBody({ 
    multipart: true,
    formidable: {
		//上传文件存储目录
		uploadDir:  path.join(__dirname, `/public/uploads/`),
		//允许保留后缀名
		keepExtensions: true,
		multipart: true,
	},
    jsonLimit:'10mb',
    formLimit:'10mb',
    textLimit:'10mb'
})); 
app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFiles(__dirname + '/public'));
app.listen('3002');
console.log("项目启动,访问：","localhost:3002");

---

总结

踩坑路漫漫长@~@