boot上传图片Vue前端展示

controller层接口

    @ResponseBody
    @GetMapping(value = "/getPicture")
    public ResponseEntity<byte[]> getPicture() throws FileNotFoundException {
        FileInputStream inputStream = new FileInputStream(url);
        byte[] bytesByStream = getBytesByStream(inputStream);
        final HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.IMAGE_PNG);
        return new ResponseEntity<>(bytesByStream,headers, HttpStatus.OK);
    }

Util工具类

public static byte[]  getBytesByStream(InputStream inputStream){
        byte[] bytes = new byte[1024];

        int b;
        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
        try {
            while((b = inputStream.read(bytes)) != -1){

                byteArrayOutputStream.write(bytes,0,b);
            }
            return byteArrayOutputStream.toByteArray();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

Vue

<template>
	<div>
		<img :src="src">
	</div>
</template>
<script>
export default {
	data(){
		return{
			src: ''
		}
	},
	created() {
		this.src = 'https://localhost:8090/getPicture'
	},
}
</script>