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

后台 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)
      }
  },
}
全部评论

相关推荐

2024-12-23 11:36
中南大学 Java
点赞 评论 收藏
分享
02-12 17:30
已编辑
字节跳动_实习生(实习员工)
要怎么办呢牛:我觉得大厂日常实习最大的意义就是给自己背书,一个好公司的实习就像一个好学历似的,能够给自己增加一个标签,让别人觉得你可以。(至于真正实习干了啥,这个感觉并不太重要)。当然一家之言,仅供参考。另外,楼主已经很强了,实习毕业双双拿下,已经领先好多好多人了,羡慕啊
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务