图片在线预览的简单实现

爱被打了一巴掌 2022-12-05 12:13 249阅读 0赞

在项目中有上传图片的需求，把图片上传到服务器上，然后把图片在服务器上的路径存储到数据库的路径字段中

功能需求：图片在线预览

思路：拿到图片的路径，得到该图片的输入流FileInputStream，然后通过Response得到Response的输出流OutputStream，最后把输入流写入到Response的输出流中，浏览器访问该接口即可实现图片在线预览！

//图片预览
        @RequestMapping("/showImage")
        @ResponseBody
        public void showImage(String path, HttpServletRequest request, HttpServletResponse response) throws Exception{ 
            response.setContentType("image/jpg");
            FileInputStream fs=new FileInputStream(new File("D:\\工作\\表单电子化\\1.jpg"));
            OutputStream os=response.getOutputStream();
            int lenth;
            byte[] bytes=new byte[1024];
            while((lenth=fs.read(bytes))>0){ 
                os.write(bytes,0,lenth);
            }
            fs.close();
            os.close();
        }

> response.setContentType(“image/jpg”); 是指定图片格式，可以通过传过来的path（包括文件后缀名）得到后缀，然后动态的指定图片格式，就可以了。
> 
> new File(D:\\工作\\表单电子化\\1.jpg") 这是写死的路径，到时候替换成传过来的path路径（服务器上的图片路径并且包括文件名和后缀名）即可。

效果

![20200910114020689.png][]

[20200910114020689.png]: /images/20221123/6a0efc2dbbf3431ea171bd68277f4759.png

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关如何简单实现视频预览和图片预览

> 工作需要做一个视频预览和图片预览，于是就发现了一个简单省事的预览方法，供大家参考一下，请多指教啊 var videoExts = [".avi", ".mp4",

小灰灰/ 2023年07月25日 06:14/ 0 赞/ 44 阅读

相关图片在线预览的简单实现

在项目中有上传图片的需求，把图片上传到服务器上，然后把图片在服务器上的路径存储到数据库的路径字段中功能需求：图片在线预览思路：拿到图片的路径，得到该图片的输入流File

爱被打了一巴掌/ 2022年12月05日 12:13/ 0 赞/ 250 阅读

相关使用pdf实现在线预览

1.安装引入 npm i vue-pdf import pdf from "vue-pdf"; components: {

ゝ一世哀愁。/ 2022年12月01日 03:41/ 0 赞/ 437 阅读

相关 PDF.js预览文件实现在线预览pdf文件

![20200825155556932.png][]首先下载源码。把他放在自己的文件里面。下载地址：[https://download.csdn.net/download/

川长思鸟来/ 2022年12月01日 01:26/ 0 赞/ 530 阅读

相关图片在线预览功能实现过程

另外一个同事开发出来一个鼠标移动上去就显示图片的功能，但是总是不好用，所以我就是用jquery按照他的思路写了一个，简单的显示是实现了的，但是在弹出框的内部计算边框范围是有难度

男娘i/ 2022年08月04日 05:22/ 0 赞/ 375 阅读

相关 Java实现在线预览--openOffice实现

\Java实现在线预览–openOffice实现 \\简介之前有写了poi实现在线预览的文章，里面也说到了使用openOffice也可以做到，这里就详细介绍一下。

我就是我/ 2022年07月24日 08:27/ 0 赞/ 291 阅读

相关一个简单的图片预览

//图片预览 $("\prodimg").change(function () \{ var objUrl

迈不过友情╰/ 2022年07月13日 08:50/ 0 赞/ 157 阅读

相关 JavaScript实现图片在线预览

本打算使用JQuery来实现的在线预览，但是由于使用的$('input\[type=file\]').val()获取的是假路径，而使用下面的语句获取的是文件名 $('inpu

曾经终败给现在/ 2022年06月11日 02:13/ 0 赞/ 526 阅读

相关本地图片在线预览

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年06月04日 06:28/ 0 赞/ 370 阅读

相关在线预览文档简单例子

以下是一个Java实现简单浏览器预览服务端文档的例子，文档包括pdf，excel，word，ppt，思路是将excel，word转化为html；将ppt转为图片，再转为html

我就是我/ 2022年06月02日 23:58/ 0 赞/ 376 阅读