springboot 图片上传与显示功能的实现
先在pom.xml中添加所需的jar包依赖
<!-- java 与json 数据转换 -->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.2.3</version>
<classifier>jdk15</classifier>
</dependency>
– 在修改一下启动类（Application）中的设置
为什么继承WebMvcConfigurer接口呢？
-
原因是这个接口中有
addResourceHandlers
方法，此方法是为了
自定义静态资源映射路径
，也就是说：图片将图片上传到内部磁盘当中，
addResourceHandler
这个方法通俗一点就是说将内部路径重命名在外部显示。
package com.sdbairui.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@SpringBootApplication
public class DemoApplication implements WebMvcConfigurer {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
// 自定义静态资源映射目录
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry){
/*
addResoureHandler：指的是对外暴露的访问路径
addResourceLocations：指的是内部文件放置的目录
*/
registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/Intellij IDEA/IntelliJ IDEA 2020.1/SpringBoot/Student/src/main/resources/static/uploadimage/");
}
}
在数据库当中添加
file
列，我用的是MySQL数据库
然后在属性Entiy包中的属性类的Student添加
Setter
＆
Getter
方法
private String file;
public String getFile() {
return file;
}
public void setFile(String file) {
this.file = file;
}
在后端Controller控制类中进行后台的编写
public static void uploadFile(byte[] file,String filePath,String fileName)throws Exception{
File targetFile=new File(filePath);
/* !targetFile.exists()：是否存在指定条件的记录*/
if(!targetFile.exists()){
// targetFile.mkdirs()创建新的目录
targetFile.mkdirs();
}
FileOutputStream fileOutputStream=new FileOutputStream(filePath+fileName);
fileOutputStream.write(file);
fileOutputStream.flush();
fileOutputStream.close();
}
@RequestMapping(value = "/upload",method = RequestMethod.POST)
@ResponseBody
// JSONObject可以很方便的转换成字符串，也可以很方便的把其他对象转换成JSONObject对象。
public JSONObject uploadImg(@RequestParam("file")MultipartFile file){
/*获得上传图片并重命名成随机名字
System.currentTimeMillis()：获得系统的时间，单位为毫秒
file.getOriginalFilename()：是得到上传时的文件名。*/
String fileName=System.currentTimeMillis()+file.getOriginalFilename();
// 声明内部路径
String filePath="D:/Intellij IDEA/IntelliJ IDEA 2020.1/SpringBoot/Student/src/main/resources/static/uploadimage/";
JSONObject jo = new JSONObject();
// 判断上传的文件是否为空，当为空时，给JSONObject传值
if(file.isEmpty()){
jo.put("success",0);
jo.put("fileName","");
}
// 当上传文件不为空时，调用upload方法，为JSONObject的对象传值
try{
uploadFile(file.getBytes(),filePath,fileName);
jo.put("success",1);
jo.put("fileName",fileName);
jo.put("xfilename","/imctemp-rainy/"+fileName);
}catch (Exception e){
e.printStackTrace();
}
return jo;
}
}
在前端，编写web上传界面,在此我用是jQuery代码和Ajax
<tr>
<td>图片地址：</td>
<td>
<input type="file" name="sname" id="file"><br> <!-- file书写浏览上传的文件-->
<!--接受显示上传图片的路径，作用是将图片的路径上传到后台服务器端，来达到上传图片的效果-->
<input type="text" name="file" id="sfile">
<!-- 显示上传图片的内容 -->
<p id="url"><img src="#" width="100" height="100"></p>
<input type="button" value="上传" id="upload">
<input type="button" value="取消" id="clean"> <br>
<input type="submit" value="提交">
</td>
</tr>
</form>
</table>
</center>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#upload").click(function () {
// 获取表单内容
var form =new FormData();
// 将表单内容，通过数组记录下来
form.append("file",document.getElementById("file").files[0]);
$.ajax({
url: "/student/upload",
data: form,
cache: false,
async: false,
type: 'post',
dataType: 'json',
processData: false,
contentType: false,
success:function (data) {
// 成功时，提示的后台JSON数据
alert(JSON.stringify(data));
if(data){
var pic=data.xfilename;
// 将上传图片存入内部磁盘当中
$("#url img").attr("src",pic);
// 将上传的图片路径保存在id为sfile当中
$("#sfile").val("/imctemp-rainy/"+data.fileName);
}else {
alert("error");
}
},
error:function (er) {
}
})
})
})
</script>
通过提交按钮，提交到后台的Controller控制类中的
doAdd
方法中，把上传的图片路径保存在数据库当中
@RequestMapping("/doAdd")
public String doAdd(HttpServletRequest request) throws Exception {
String file=request.getParameter("file");
Student student=new Student();
student.setFile(file);
serviceStudent.doCreate(student);
return "redirect:/student/findPage";
}
最后就是成功之后图片在前端的web页面中的显示功能
<td><img th:src="@{${student.file}}" height="100" width="100"></td>