SpringBoot+ajax+formData实现图片上传和回显
Posted Alt_Shift
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringBoot+ajax+formData实现图片上传和回显相关的知识，希望对你有一定的参考价值。
前端html
<h2>图片上传</h2> <img src="" id="preview_photo" width="200px" height="200px"> <a href="javascript:void(0)" id="photo_upload" onclick="upLoadPhoto()">select photo</a> <input type="file" id="upload" style="display: none" onchange="upload()">
注意 img标签的src是未赋值的
js代码
<script>
function upLoadPhoto(){
$("#upload").click();
}
function upload(){
var form = new FormData();
form.append("file", $("#upload")[0].files[0]);
$.ajax({
type :"POST",
url:"http://localhost:8888/picture/upload.json",
dataType:"json",
data:form,
processData:false,
contentType:false,
success:function(data){
console.info(data.result.path);
$("#preview_photo").attr("src",data.result.path);
},
error:function (data) {
alert("error");
}
})
}
</script>
这里推荐了解一下ajax的各个参数用处：
https://www.cnblogs.com/wuchenfei/p/9820958.html（借用大佬的博客）
后端这里没有使用service，直接在controller中进行的fileName拼装和返回
package com.zdj.controller; import com.zdj.utils.R; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.UUID; @RestController @RequestMapping("/picture") public class PictureController { //图片的物理存储路径 private static final String filePath = "D:/aaaaa/"; //设置的tomcat静态虚拟路径 private static final String vFilePath = "http://localhost:8888/pic/"; @RequestMapping("/upload") public R upLoad(@RequestParam("file") MultipartFile file[]){ //获取图片的名字 String fileName = file[0].getOriginalFilename(); //获取文件后缀名 String suffix = getSuffix(fileName); //判断后缀名 if(!suffix.equals("jpg") && !suffix.equals("png")){ System.out.println("suffix error"); return R.ok("0"); } //返回map来获取图片的虚拟路径 Map<String, String> result = new HashMap<>(); //date文件夹，方便管理 String dateFile = new SimpleDateFormat("yyyyMMdd").format(new Date()); String newfileName = filePath + dateFile; File newFile = new File(newfileName); //判断文件夹是否存在，不存在则创建 if(!newFile.exists()){ newFile.mkdirs(); } //为文件添加uuid防止名字重复 fileName = UUID.randomUUID().toString().replace("-","") + fileName; String newFilePath = newfileName + "/" + fileName; result.put("path",vFilePath + dateFile + "/" + fileName); try { file[0].transferTo(new File(newFilePath)); } catch (IllegalStateException|IOException e) { e.printStackTrace(); } return R.ok(result); } //封装获取后缀名方法 public static String getSuffix(String fileName){ int lastIndexOf = fileName.lastIndexOf("."); String suffix = fileName.substring(lastIndexOf + 1); return suffix; } }
当我写到这里的时候我发现我卡住了，原因是回显的时候无法直接从D盘中获取图片的路径。
所以我使用了tomcat的虚拟路径，在SpringBoot中添加config类
package com.zdj.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/pic/**").addResourceLocations("file:D:/aaaaa/"); } }
同时这里的“D：/aaaaa/”直接被替换成了“http：//localhost:8888/pic/”
前端获取的虚拟路径就可以直接赋给img标签的src来进行图片的回显
问题
1.@RequestParam("file")的使用
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
对于上述的图片数据库的补充：
添加文件大小的限制：1.前端限制，将这个问题交给用户来解决 2. 后端限制，防止接口的恶意调用
主要针对后端的限制，方法体增加
@RestController @RequestMapping("/picture") public class PictureController { //图片的物理存储路径 private static final String filePath = "D:/aaaaa/"; //设置的tomcat静态虚拟路径 private static final String vFilePath = "http://localhost:8888/pic/"; @RequestMapping("/upload") public R upLoad(@RequestParam("file") MultipartFile file){ //对图片大小进行限制（10M） if(!checkFileSize(file.getSize(), 10, "M")){ return R.ok("error"); } //获取图片的名字 String fileName = file.getOriginalFilename(); //获取文件后缀名 String suffix = getSuffix(fileName); //判断后缀名 if(!suffix.equals("jpg") && !suffix.equals("png")){ System.out.println("suffix error"); return R.ok("0"); } //返回map来获取图片的虚拟路径 Map<String, String> result = new HashMap<>(); //date文件夹，方便管理 String dateFile = new SimpleDateFormat("yyyyMMdd").format(new Date()); String newfileName = filePath + dateFile; File newFile = new File(newfileName); //判断文件夹是否存在，不存在则创建 if(!newFile.exists()){ newFile.mkdirs(); } //为文件添加uuid防止名字重复 fileName = UUID.randomUUID().toString().replace("-","") + fileName; String newFilePath = newfileName + "/" + fileName; result.put("path",vFilePath + dateFile + "/" + fileName); try { file.transferTo(new File(newFilePath)); } catch (IllegalStateException|IOException e) { e.printStackTrace(); } return R.ok(result); } //封装获取后缀名方法 public static String getSuffix(String fileName){ int lastIndexOf = fileName.lastIndexOf("."); String suffix = fileName.substring(lastIndexOf + 1); return suffix; } /** *封装判断文件大小 * @param len 文件长度默认单位字节 * @param size 额定长度 * @param unit 额定单位 * @return */ public static boolean checkFileSize(Long len, int size, String unit){ double fileSize = 0; if ("B".equals(unit.toUpperCase())) { fileSize = (double) len; } else if ("K".equals(unit.toUpperCase())) { fileSize = (double) len / 1024; } else if ("M".equals(unit.toUpperCase())) { fileSize = (double) len / 1048576; } else if ("G".equals(unit.toUpperCase())) { fileSize = (double) len / 1073741824; } if (fileSize > size) { return false; } return true; } }
以上是关于SpringBoot+ajax+formData实现图片上传和回显的主要内容，如果未能解决你的问题，请参考以下文章