一、问题介绍
在一个在线图片分享系统中,前端使用JS+jQuery,后端使用Maven管理项目,采用分层次目录结构(Controller、Service、Mapper等)的一个Java语言编写的SSM(Spring+SpringBoot+Mybatis)项目中,需要实现一个前端标签上传图片,后端Controller层接收并处理图片。
二、前端上传图片方案
1.上传
上传图片的方式有很多,可以采用base64、blob等类型处理,而本文由于前端上传图片采用的是原生JS标签input的file类型:
<input type="file">
这个标签选择文件后,图片的路径会显示在这个标签中,但直接使用这个标签显然是不可以获取到图片的(你只是访问本地路径可以看得见图片,但网页它不认识这个路径所意味着的图片文件)。
2.前端网页显示此上传的图片
(1)HTML代码:
<input type="file" id="uploadimage" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<img id="showimage" style="width: auto;height: 80%;" src="" alt="请上传图片">
属性解释:
<input>标签:
id:ID属性值,用于JS定位该标签;
type:设置为file,提供一个可以上传文件的按钮;
accept:顾名思义,是限制接受的文件类型的,规定这个属性值可限定文件类型为图片,如.jpg、.png(高清)、.gif(动图)、.jpeg、.svg(不推荐);
<img>标签:
id:同上;
style:样式设定;
src:路径;
alt:加载图片失败或src为空时的默认文本。
(2)JS代码:
document.getElementById("uploadimage").onchange = function(){//当input标签上传了一个图片时
var file = this.files;//将当前图片文件赋值给file变量
var reader = new FileReader();//创建一个新FileReader类
reader.readAsDataURL(file[0]);//将图片文件传给该FileReder
reader.onload = function ()//加载
{
var image = document.getElementById("showimage");
image.src = reader.result;
};
}
3.前端上传该图片文件
使用JS代码处理该文件,采用FormData类型将该图片以二进制流的形式发给后端:
JS代码:
FormData类的使用:
var formData = new FormData();
formData.set("file", document.getElementById('uploadimage').files[0]);
使用$.ajax发送请求:
$.ajax({
url: "images/insertOneImageFile",//后端Controller层处理图片文件的对应接口
type: "post",
data: formData,//发送的数据为FormData类
async: false,
cache: false,
processData: false, // 不处理发送的数据
contentType: false, // 不设置Content-Type请求头
success:function (data) {
$("#path").text(data);
console.log(data);
},
error: function(error){
imagestring = "";
alert("上传图片出错!");
}
});
4.后端处理FormData:
Controller层代码:
@RequestMapping("/insertOneImageFile")
public String insertOneImageFile(HttpServletRequest request, HttpServletRequest response, HttpSession session){
MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
MultipartFile multipartFile = multipartRequest.getFile("file");
assert multipartFile != null;
MultipartFileToFile.saveMultipartFile(multipartFile, "src/main/resources/static/images");
return MultipartFileToFile.saveMultipartFile(multipartFile, "target/classes/static/images");
}
所使用的保存图片到本地路径的工具类1:MultipartFileToFile.class:
(注:本文默认已经配置好Spring及SpringBoot环境)
package com.id.utils;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.UUID;
/**
* @Description 存储和删除MultipartFile文件
* @Author haoyalei
**/
public class MultipartFileToFile {
/**
*
* @param file
* @param targetDirPath 存储MultipartFile文件的目标文件夹
* @return 文件的存储的绝对路径
*/
public static String saveMultipartFile(MultipartFile file, String targetDirPath){
File toFile = null;
if (file.equals("") || file.getSize() <= 0) {
return null;
} else {
/*获取文件原名称*/
String originalFilename = file.getOriginalFilename();
/*获取文件格式*/
String fileFormat = originalFilename.substring(originalFilename.lastIndexOf("."));
String uuid = UUID.randomUUID().toString().trim().replaceAll("-", "");
toFile = new File(targetDirPath + File.separator + uuid + fileFormat);
String absolutePath = null;
try {
absolutePath = toFile.getCanonicalPath();
/*判断路径中的文件夹是否存在,如果不存在,先创建文件夹*/
String dirPath = absolutePath.substring(0, absolutePath.lastIndexOf(File.separator));
File dir = new File(dirPath);
if (!dir.exists()) {
dir.mkdirs();
}
InputStream ins = file.getInputStream();
inputStreamToFile(ins, toFile);
ins.close();
} catch (IOException e) {
e.printStackTrace();
}
return uuid + fileFormat;//uuid为保存时所使用的文件名;fileFormat为文件扩展名(.jsp什么的)
}
}
//获取流文件
private static void inputStreamToFile(InputStream ins, File file) {
try {
OutputStream os = new FileOutputStream(file);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
}
os.close();
ins.close();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 删除本地临时文件
*
* @param file
*/
public static void deleteTempFile(File file) {
if (file != null) {
File del = new File(file.toURI());
del.delete();
}
}
}
附言
由于本选题程序不便于公开,故此处只贴上核心代码。文章来源:https://www.toymoban.com/news/detail-700041.html
-
参照链接:https://blog.csdn.net/weixin_45379185/article/details/125852990 ↩︎文章来源地址https://www.toymoban.com/news/detail-700041.html
到了这里,关于SpringBoot项目中前后端对图片的上传与接收操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!