后台如何将图片的byte[]转成流传给前端展示

本文介绍如何使用SpringMVC框架处理前端请求,通过@RequestMapping注解映射URL,实现直接返回图片数据的方法。示例代码展示了如何获取图片字节流并将其写入HTTP响应中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里用springMVC做个例子,前端请求以下方法时,直接返回一张图片

@RequestMapping("/showPhoto")
public void showPhoto(String photoID, HttpServletResponse response) {
	OutputStream outputStream = null;
	try {
		byte[] photoByte = photo.getPhoto(photoID);
		outputStream = response.getOutputStream();
		outputStream.write(photoByte);
		outputStream.flush();
	} catch (Exception e) {
		logger.error("error", e);
	} finally {
		try {
			outputStream.close();
		} catch (IOException e) {
			logger.error("error", e);
		}
	}
}
### SpringBoot 和 Vue 实现 PDF 在线预览功能 要实现基于 SpringBoot 和 Vue 的 PDF 文件在线预览功能,可以通过以下方式完: #### 后端部分(SpringBoot) 在后端,主要负责接收前端请求并将 PDF 转换为可被浏览器渲染的形式。通常的做法是将 PDF 转换 Base64 编码或者通过流的方式返回给前端。 1. **引入依赖** 需要在 `pom.xml` 中添加必要的依赖项来处理文件流传输。 ```xml <!-- 文件IO --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.8.0</version> </dependency> <!-- Servlet API 支持 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <scope>provided</scope> </dependency> ``` 2. **创建控制器方法** 定义一个接口用于提供 PDF 流数据供前端调用。 ```java @RestController public class PdfController { @GetMapping("/api/pdf/{filename}") public ResponseEntity<byte[]> getPdf(@PathVariable String filename) throws IOException { File file = new File("path/to/your/pdfs/" + filename); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); return ResponseEntity.ok() .headers(headers) .body(FileUtils.readFileToByteArray(file)); } } ``` 这里使用了 Apache Commons IO 工具库中的 `FileUtils` 方法读取文件内容并将其作为字节数组返回[^1]。 #### 前端部分(Vue.js) 在前端方面,则利用 HTML5 提供的 `<embed>` 或者 `<iframe>` 标签加载由后端传递过来的内容链接地址。 1. **HTML 结构设置** 创建一个简单的组件用来展示 PDF 文档。 ```html <template> <div> <h3>{{ title }}</h3> <button @click="loadPdf">Load Resume</button> <embed v-if="showPdf" :src="pdfUrl" type="application/pdf" width="100%" height="700px"/> </div> </template> ``` 2. **JavaScript 处理逻辑** 添加按钮点击事件处理器去触发向服务端发起获取资源的动作。 ```javascript export default { data() { return { showPdf: false, pdfUrl: '', title: 'Resume Viewer' }; }, methods: { loadPdf() { this.pdfUrl = `${process.env.VUE_APP_API_BASE_URL}/api/pdf/resume.pdf`; this.showPdf = true; } } }; ``` 此处假设环境变量已经配置好指向后台API的基础URL[^4]。 #### 综合考虑其他方案 如果希望进一步提升用户体验还可以采用第三方插件比如 [PDF.js](https://mozilla.github.io/pdf.js/) 来解析和显示PDF文档而无需完全依赖于原生标签支持[^2]。 ---
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值