vue获取图片验证码

 <el-form-item label="图片验证码" label-width="25%">
        <el-col :span="15">
            <el-form-item prop="photoIdentityCode">
              <el-input type="text" v-model="loginForm.photoIdentityCode" placeholder="单击图片刷新"
                style="width: 100%;"  @keyup.enter.native="login" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">&nbsp;</el-col>
          <el-col :span="8">
            <el-form-item>
                <img class="captcha-img pointer" :src="loginForm.src" @click="refreshCaptcha" clearable> 
            </el-form-item>
          </el-col>
        </el-form-item>

所有请求采用axios进行封装；

//获取图片校验码
    refreshCaptcha: function(){
      this.loginForm.timeStamp=new Date().getTime();
      let params={
        "data":{
        "timeStamp":this.loginForm.timeStamp
        }
      }
      this.$api.LoginManage.getPhotoValidCode(params).then((res)=>{
        let img = btoa(
          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
        this.loginForm.src=  'data:image/png;base64,' +img;
      })
    },

后端返回为图片流，所以要加 responseType: "arraybuffer" 这句代码；

// 获取图片验证码
export const getPhotoValidCode = (params) => {
    return axios({
        url: 'loginInfo/getPhotoValidCode',
        responseType: "arraybuffer",
        method: 'post',
        params
    })
}