Vue前端接收后端返回的文件流图片、img标签展示图片、前端接收文件流验证码

vue项目前端处理后端返回的图片_vue项目前端获取后端图片大-CSDN博客

base64 , blob,url图片的处理方式 - 掘金

后端如何返回一个（图片）文件流，并在前端vue展示。_后端返回图片流-CSDN博客

做登录或者注册的时候，会用到验证码，前端会接收后端发的验证码图片

就像这样的

<el-form-item label="验证码" prop="name">
  <el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input>
  <div class="verification">
    <img :src="this.verificationImg" alt="" @click="acquireVerification">
  </div>
</el-form-item>

data () {
  return {
    verificationImg: '',
    ruleForm: {
      verification: ''
    }
},

acquireVerification () {
	// {responseType: 'blob'} ，不加这个返回的就是乱码
    //直接获取
  axios.get('/api/verifyCode', {responseType: 'blob'}).then((response) => {
    console.log(response.data)
    this.verificationImg = window.URL.createObjectURL(response.data)
    console.log(this.verificationImg)
  })
    //加参数的
    axios({
      method: "get",
      url: "/purchase/captcha.jpg",
      params: {
        uuid:this.loginForm.uuid,
      },
      responseType: "blob",
    })
      .then(response => {
        console.log(response.data);
        this.verificationImg = window.URL.createObjectURL(response.data)
      })
      .catch(error => {
        console.log(error.data);
      });

      }
}


mounted () {
  this.acquireVerification()
}

//第二种：
loadFile() {
      axios({
        method: 'get',
        url: '/api/file/download/123456',
        responseType: 'blob',
        params: {},
        headers: {
          Accept: 'application/octet-stream',   
        },
      }).then(res => {
        let blob = new Blob([res.data], {type: 'image/jpeg'});
        const imageUrl = window.URL.createObjectURL(blob);
        this.imgUrl = imageUrl;
      }).catch(err => {
        console.log('导出失败')
      })
    },

其他：

export function getUserImg(userId) {
  return request({
    url: `/api/user/downloadUserImage/${userId}`,
    method: "get",
    responseType: 'blob',
  });
}
 
// 用户头像
    fnUserImg() {
      getUserImg(this.userId).then(res => {
        console.log('res', res);
        const blob = new Blob([res.data], { type: "image/jpeg" }); //类型一定要写！！！
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => {
          console.log(reader.result)
          this.imageUrl = reader.result
        }
      })
    },