提示：html可以直接显示svg图片，但是vue会把后台返回的svg数据当成字符串进行处理，需要把svg数据解析成svg标签，这就需要用到v-html了
文章目录
前言一、vue如何显示svg二、使用步骤1.vue中Login.vue2.vue中axios.js3.koa中routes.js4.koa中app.js 总结前言
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, // 是否允许发送CookieallowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 设置所允许的HTTP请求方法allowHeaders: ['Content-Type', 'Authorization', 'Accept'], // 设置服务器支持的所有头信息字段exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] // 设置获取其他自定义字段}))const sessionConfig = {key: 'koa:sess', // cookie的key,默认koa:sessmaxAge: 1000*6, // 过期时间，毫秒msautoCommit: true, // 提交到响应头overwrite: true, // 重写httpOnly: true, // 无法获得Cookie信息signed: true,// 签名rolling: true,// 每次刷新renew: false,// 快过期刷新};app.keys = ["long long age"];// signed签名keyapp.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");
总结
踩坑路漫漫长@~@
