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

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

相关推荐

评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务