Java实现图片的上传和显示

简介: Java实现图片的上传和显示

🎈前言

提示:前端Vue(Vue.js)+后端Servlet实现图片的上传和显示

🎄前端:

软件工具:Visual Studio Code

技术:Vue.js

🎡后端:

软件工具:idea

技术:Servlet、Javaweb


提示:以下是本篇文章正文内容,下面案例可供参考

👓一、图片上传和显示

总体流程:

1、用户在前端页面中选择新闻图片并提交表单。

2、表单数据被发送到Java Servlet后台。

3、Java Servlet后台接收到表单数据并处理,将图片保存到服务器上。

4、Java Servlet后台将图片URL信息保存到数据库中。

5、前端页面重新发起请求,从数据库中获取新闻列表。

6、新闻列表被发送到前端页面,通过Vue.js进行渲染,将新闻以及对应的图片显示出来。

🍕二、使用步骤

1.图片上传和显示

实际效果运用如下:

2.前端(Vue)部分

1)HTML表单的部分,用于获取用户输入的新闻图片地址链接:

<div class="am-form-group">
              <label for="user-name" class="am-u-sm-3 am-form-label">
                新闻图片
              </label>
              <div class="am-u-sm-9">
                <input  v-model="picture" id="roleName" required="required" placeholder="请输入新闻图片地址链接" value="1"
                  name="picture" type="file">
                <small id="helpRole">选择新闻图片。</small>
              </div>
            </div>

效果展示:

关键代码解读:

type=“file” 这是本段代码的关键,上传图片的本质是上传文件,所以这个输入框要设置为file类型的。在 HTML 表单中,type属性为 “file” 的 input 元素允许用户通过浏览和选择文件的方式上传文件到服务器。

2)添加一列图片,并将从服务器获取的新闻图片展示在该列中:

<el-table-column prop="picture" label="图片" width="180" height="100 ">
                <template slot-scope="scope">
                  <img :src="'http://localhost:9090/NewsReleaseSystem/upload'+scope.row.picture" alt="新闻图片" width="100px" height="100px">
                </template>
              </el-table-column>

效果展示:

这段代码的作用是在 Element UI 表格组件中添加一列图片,用于显示从服务器获取的新闻图片。具体来说:

  • prop=“picture” 表示当前列对应的数据源属性名为 picture。 label=“图片” 表示当前列的表头文本为 “图片”。
  • width=“180” 和 height=“100” 分别设置了图片列的宽度和高度。 在 中使用了 Vue.js的插槽(slot)机制来自定义表格单元格内容
  • slot-scope=“scope” 表示将当前作用域对象 scope 传递到插槽中。直白说就是为了获取当前行所有数据
  • img 标签的 :src 属性绑定了一个动态数据,即通过拼接字符串将 scope.row.picture 这个图片地址与服务器上传文件地址的前缀组合在一起形成完整的图片地址,从而显示图片。

3.后端(Servlet)部分

注意:前提是已经创建好new实体类,并且导入相关依赖

mapper文件: 写好查询新闻列表sql语句

Service:

1)从数据库中查询所有的新闻列表,并返回一个包含所有新闻的 List<News> 对象。

Servlet:

1)从HTTP请求中获取名为 “picture” 的上传文件,并将其存储在一个 Part 对象中,以便进行后续处理。

2)getServletContext().getRealPath("upload") 方法返回一个字符串,表示服务器上要将上传文件保存到的文件夹路径。在这种情况下,文件夹的名称为 “upload”。该方法获取的文件夹路径是基于Web应用程序根目录的相对路径。

然后,new File(storePath).mkdirs() 方法创建一个名为 “upload” 的文件夹,如果它不存在于指定的路径(在这里是Web应用程序的根目录)中。

接下来,通过 picture.getSubmittedFileName() 方法获取上传文件的原始文件名。然后使用 System.currentTimeMillis() 方法获取当前系统时间的毫秒数,并将其添加到文件名中,以确保文件名的唯一性。最终生成的文件名被存储在 filename 变量中。

最后,picture.write(storePath+"/"+filename) 将上传的文件写入磁盘上的文件夹,在这里是 “upload” 文件夹。实际上,这行代码将上传文件保存到了指定路径下的名为 filename 的文件中。

1)通过将 “/” 和 filename 连接起来,生成一个完整的图片路径,并将其设置为新闻对象的图片路径属性。

注意:与上文提到的上传图片到服务器的代码配合使用。也就是先将图片保存到服务器上指定位置,然后再将 news 对象的图片路径设置为上传的图片在服务器上的位置。


🍳总结

1)以上就是今天要讲的内容,本文仅仅简单介绍了Vue(Vue.js)+Servlet,用表单实现新闻图片上传和显示。

2)需要注意的是,以上代码只实现了基本的图片上传和显示功能,还需要进一步优化和完善。例如,在处理文件上传时,没有对上传文件进行大小、类型等方面的验证,以防止恶意攻击或误操作导致的问题发生。同时,在保存上传文件时,还需要考虑文件名冲突、文件夹权限等诸多细节问题。

【都看到这了,点点赞点点关注呗,爱你们】😚😚

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rmH4vAaR-1687096779957)(null)]

结语


相关文章
|
2月前
|
Java
Java开发实现图片URL地址检验,如何编码?
【10月更文挑战第14天】Java开发实现图片URL地址检验,如何编码?
79 4
|
2月前
|
Java
Java开发实现图片地址检验,如果无法找到资源则使用默认图片,如何编码?
【10月更文挑战第14天】Java开发实现图片地址检验,如果无法找到资源则使用默认图片,如何编码?
62 2
|
2月前
|
算法 Java Linux
java制作海报二:java使用Graphics2D 在图片上合成另一个照片,并将照片切割成头像,头像切割成圆形方法详解
这篇文章介绍了如何使用Java的Graphics2D类在图片上合成另一个照片,并将照片切割成圆形头像的方法。
50 1
java制作海报二:java使用Graphics2D 在图片上合成另一个照片,并将照片切割成头像,头像切割成圆形方法详解
|
6月前
|
数据可视化 Java
Java语言使用DL4J实现图片分类
【6月更文挑战第14天】Java语言使用DL4J实现图片分类
113 3
|
2月前
|
Java 数据安全/隐私保护
Java ffmpeg 实现视频加文字/图片水印功能
【10月更文挑战第22天】在 Java 中使用 FFmpeg 实现视频加文字或图片水印功能,需先安装 FFmpeg 并添加依赖(如 JavaCV)。通过构建 FFmpeg 命令行参数,使用 `drawtext` 滤镜添加文字水印,或使用 `overlay` 滤镜添加图片水印。示例代码展示了如何使用 JavaCV 实现文字水印。
103 1
|
2月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
21 1
|
2月前
|
算法 Java Linux
java制作海报四:java BufferedImage 转 InputStream 上传至OSS。png 图片合成到模板(另一个图片)上时,透明部分变成了黑色
这篇文章主要介绍了如何将Java中的BufferedImage对象转换为InputStream以上传至OSS,并解决了png图片合成时透明部分变黑的问题。
70 1
|
2月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
116 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
3月前
|
Java
Java-FileInputStream和FileOutputStream的使用,txt文件及图片文件的拷贝
这篇文章介绍了Java中FileInputStream和FileOutputStream的使用,包括如何读取和写入txt文件以及如何拷贝图片文件。
Java-FileInputStream和FileOutputStream的使用,txt文件及图片文件的拷贝
|
3月前
|
存储 缓存 监控
Java——图片文件位于 bin 目录下,下载新图片会导致应用程序重启
【9月更文挑战第22天】在Java应用中,若图片位于bin目录下且下载新图片导致应用重启,可能是因为部署方式不当或资源监控机制过于敏感。解决方法包括:更改图片存储位置至独立目录;配置应用服务器减少资源监控敏感度;使用独立资源服务器托管静态资源;优化代码减少资源重复加载。具体方案需根据应用实际情况和技术栈调整。