写在前面

需求：登录页获取图片验证码，后端以二进制流的形式返回。

一、效果：

1587960536.jpg

二、代码

本文vue中请求的axios所用为vue-element-admin中封装的request

<template>
 <div class="login-container" :style="bg">
   <h4 class="login-title"><img :src=logo alt="" class="logo">高密度空气质量监测原型系统</h4>
   <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
     <div class="title-container">
       <h3 class="title">系统登录</h3>
     </div>
     <el-form-item prop="username">
       <span class="svg-container">
         <svg-icon icon-class="user" />
       </span>
       <el-input
         ref="username"
         v-model="loginForm.username"
         placeholder="用户名"
         name="username"
         type="text"
         tabindex="1"
         autocomplete="on"
       />
     </el-form-item>

     <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
       <el-form-item prop="password">
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
         <el-input
           :key="passwordType"
           ref="password"
           v-model="loginForm.password"
           :type="passwordType"
           placeholder="密码"
           name="password"
           tabindex="2"
           autocomplete="on"
           @keyup.native="checkCapslock"
           @blur="capsTooltip = false"
           @keyup.enter.native="handleLogin"
         />
         <span class="show-pwd" @click="showPwd">
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
     </el-tooltip>
     <el-form-item prop="validateCode" style="border: none">
       <div style="width: 160px;border:1px solid #889aa4;border-radius: 5px;display: inline-block">
         <span class="svg-container">
         <svg-icon icon-class="message" />
        </span>
         <el-input
           ref="validateCode"
           v-model="loginForm.validateCode"
           placeholder="验证码"
           name="validateCode"
           type="text"
           tabindex="1"
           autocomplete="on" style="width: 78%"
         />
       </div>
       <div class="yzm_picture_div">
         <img :src="codeImg"/>
       </div>
       <div class="yzm_text_div">
         <a href="javascript:void(0);" @click="loadCode">看不清,换一张？</a>
       </div>
     </el-form-item>
     <el-form-item style="background: #fff;border: none">
       <div class="tips">
         <p><a @click="finduser">忘记用户名？</a><a @click="findpass">忘记密码？</a></p>
       </div>
     </el-form-item>
     <el-form-item style="background: #fff;border: none">
       <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin" style=" width: 47%;">登录</el-button>
       <el-button @click="register" type="primary" style=" width: 47%;">注册</el-button>
     </el-form-item>
   </el-form>
 </div>
</template>
<script>
 import { validUsername } from '@/utils/validate'
 import { getCode } from '@/api/user'
 import SocialSign from './components/SocialSignin'
 import LangSelect from '@/components/LangSelect'
 import backgroundImage from "../../assets/bg_login.png";
 import logo from "../../assets/logo2.png";
 export default {
   name: 'Login',
   components: { LangSelect, SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
       if (value =='') {
         callback(new Error('请输入登录名'))
       } else {
         if (value.length > 20) {
           callback(new Error('请输入小于20位登录名'))
         } else {
           callback()
         }
       }
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6 ||value.length > 20) {
         callback(new Error('请输入6-20位密码'))
       } else {
         callback()
       }
     }
     return {
       backgroundImage,
       logo,
       codeImg:'',
       bg:{
         background:`url(${backgroundImage})`,
         backgroundSize:'100% 100%'
       },
       loginForm: {
         validateCode:'',
         username: '',
         password: '' //BKa531*$%_6
       },
       loginRules: {
         validateCode:  [{ required: true, message: '请输入验证码', trigger: 'blur' },
         { min: 4, max: 4, message: '请输入右侧4位数验证码', trigger: 'blur' }],
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
       passwordType: 'password',
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
       otherQuery: {}
     }
   },
   created() {
       this.loadCode();
     // window.addEventListener('storage', this.afterQRScan)
   },
   mounted() {
     if (this.loginForm.username == '') {
       this.$refs.username.focus()
     } else if (this.loginForm.password == '') {
       this.$refs.password.focus()
     }
     else if (this.loginForm.validateCode == '') {
       this.$refs.validateCode.focus()
     }
   },
   destroyed() {
     // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
     register(){
       this.$router.push({path: '/register'});
     }，
     loadCode() {
       getCode().then(res => {  //获取验证码
         this.codeImg=window.URL.createObjectURL(res);
         })
     }
   }
 }
</script>

三、请求

image.png

三、请求（其他网友，正常axios）

首先axios请求必须加上responseType: 'blob',
  export function getPicture(obj) {
    return request({
      url: '/display/getDetailPicture',
      method: 'get',
      responseType: 'blob',
      params: obj
    })
  }
getPicture({ id: id }).then(response => {
      this.picUrl = window.URL.createObjectURL(response);
    });
直接用不就可以了
<img style="width:200px;height:200px" :src="picUrl" alt />