前后分离项目中,后台获取前台上传的数据

后台 java

@PostMapping("/user/headaPicture")
    public ResponseEntity<byte[]> getImage() throws IOException {
        ClassPathResource imgFile = new ClassPathResource("image\\b.jpg");
        byte[] bytes = StreamUtils.copyToByteArray(imgFile.getInputStream());
        System.out.println(Arrays.toString(bytes));
        return ResponseEntity.ok().contentType(MediaType.IMAGE_PNG).body(bytes);
    }

前台 ant design pro for vue

<template>
	<img :src="headaPictureUrl">
</template>
export default {
	data () {
    	return {
        headaPictureUrl: ''
        }
    }
  mounted () {
      this.getImage()
    },
   methods: {
      async getImage () {
        const response = await axios.post(Address.HeadaPicture, null, { responseType: 'arraybuffer' }) // 从服务端获取图片数据,并设置 responseType 属性为 'blob'
        const blob = new Blob([response.data]) // 将二进制数据转换成 Blob 对象
        this.headaPictureUrl = URL.createObjectURL(blob) // 使用 URL.createObjectURL() 方法将 Blob 对象转换成 URL,并将其赋值给 img 的 src 属性
        console.log(this.headaPictureUrl)
      }
  },
}
全部评论

相关推荐

06-26 15:33
青岛工学院 Java
积极的秋田犬要冲国企:他现在邀请我明天面试
点赞 评论 收藏
分享
07-15 14:14
门头沟学院 Java
7.10投递7.15感谢信
投递地平线等公司7个岗位
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务