多图上传，前台传Base64，后台转换成MultipartFile然后进行上传
代码可能有点多 首先感谢黄鑫网友指导我：这个前端我是搬他的：https://blog.csdn.net/huangxin112/article/details/74956462
首先上前端代码【这个是引用别人的，这个是body中的内容】
然后是 css
.float {
float: left;
width: 200px;
height: 200px;
overflow: hidden;
border: 1px solid #CCCCCC;
border-radius: 10px;
padding: 5px;
margin: 5px;
}
img {
position: relative;
}
.result {
width: 200px;
height: 200px;
text-align: center;
box-sizing: border-box;
}
#file_input {
display: none;
}
.delete {
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
z-index: 10;
font-size: 30px;
background-color: rgba(255, 255, 255, 0.8);
color: #777;
opacity: 0;
transition-duration: 0.7s;
-webkit-transition-duration: 0.7s;
}
.delete:hover {
cursor: pointer;
opacity: 1;
}然后是js【自己引入jquery包】
注意我代码中传的是base64编码，并不是传的file input 此代码实现了 追加 删除 预览的效果
效果如下【图片是我 外爷 研究原子弹的时候在戈壁滩上当兵 帅吧】
至此前端已经完成
下面我们看一下后端的代码：
这里有一个小知识点就是后台需要处理一下前台传过来的JSON数据 我们使用JSONArray进行处理
使用JSONArray我们需要导入一个包
public ResponseVO addPicturePackage(HttpServletRequest request, String desc,String title) throws IOException {
LOG.info("addPicturePackage .................");
String submitArr = request.getParameter("submitArr");
JSONArray json=JSONArray.fromObject(submitArr);
JSONObject jsonOne;
List> mapList = new ArrayList>();
for (int i= 0;i map= new HashMap();
jsonOne = json.getJSONObject(i);
String name = jsonOne.getString("name");
String base64 = jsonOne.getString("base64");
map.put("name",name);
map.put("base64",base64);
mapList.add(map);
}
System.out.println(mapList.size());
// List multipartFileList = new ArrayList<>();
//
// for (Base64Parameter base64Parameter:submitArr) {
// MultipartFile multipartFile = Base64DecodeMultipartFile.base64Convert(base64Parameter.getBase64());
// multipartFileList.add(multipartFile);
// }
//
// List names = ImageUtil.saveImage(multipartFileList,"d:","1");
// for (String names1:names) {
// System.out.println(names+"名字======================");
// }
ResponseVO res = new ResponseVO();
// picturePackageService.insertPicturePackage(req,session);
return res;
}
处理的时候我 把他们存入了List集合中 集合类型是Map类型，其实我这一步是多此一举的【我就是随手一写想把它存进map中】，我们直接可以在循环JSONArray的 for循环中进行Base64转MultipartFile
Base64转MultipartFile操作：我在网上搜的一个转换类：
package com.bfc.boperation.common;
import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Decoder;
import java.io.*;
public class Base64DecodeMultipartFile implements MultipartFile {
private final byte[] imgContent;
private final String header;
public Base64DecodeMultipartFile(byte[] imgContent, String header) {
this.imgContent = imgContent;
this.header = header.split(";")[0];
}
@Override
public String getName() {
return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];
}
@Override
public String getOriginalFilename() {
return System.currentTimeMillis() + (int)Math.random() * 10000 + "." + header.split("/")[1];
}
@Override
public String getContentType() {
return header.split(":")[1];
}
@Override
public boolean isEmpty() {
return imgContent == null || imgContent.length == 0;
}
@Override
public long getSize() {
return imgContent.length;
}
@Override
public byte[] getBytes() throws IOException {
return imgContent;
}
@Override
public InputStream getInputStream() throws IOException {
return new ByteArrayInputStream(imgContent);
}
@Override
public void transferTo(File dest) throws IOException, IllegalStateException {
new FileOutputStream(dest).write(imgContent);
}
/**
* base64转multipartFile
*
* @param base64
* @return
*/
public static MultipartFile base64Convert(String base64) {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
try {
b = decoder.decodeBuffer(baseStrs[1]);
} catch (IOException e) {
e.printStackTrace();
}
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new Base64DecodeMultipartFile(b, baseStrs[0]);
}
}
我们调用最后一个方法base64Convert方法即可，注意这是处理单个单个的base64 所以放在我那个controller的for循环中去即可进行转换，我们创建一个MultipartFile集合将他添加进去即可。
我这提供添加图片的工具类仅供参考
package com.bfc.boperation.common;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.time.Instant;
import java.util.ArrayList;
import java.util.List;
public class ImageUtil {
public static String base64ToImage(String base64Str, String rootDir, String dir) throws IOException {
String prefix = "data:image/";///jpeg;base64,";
if (base64Str.startsWith(prefix)) {
base64Str = base64Str.substring(base64Str.indexOf(";base64,") + 8);
}
byte[] image = Base64Util.decodeBase64Bytes(base64Str);
String dirTempName = File.separator + dir + File.separator + DateUtil.time2stringCurrent(DateUtil.FORMAT_STR_TWO);
mkdir(rootDir + dirTempName);
String fileName = Instant.now().getEpochSecond() + "-" + Md5Util.md5Short(IdUtil.genUUID()) + ".jpg";
OutputStream out = new FileOutputStream(rootDir + dirTempName + File.separator + fileName);
out.write(image);
out.flush();
out.close();
return dirTempName + File.separator + fileName;
}
public static String saveImage(MultipartFile imageFile, String rootDir, String dir) throws IOException {
String dirTempName = File.separator + dir + File.separator + DateUtil.time2stringCurrent(DateUtil.FORMAT_STR_TWO);
mkdir(rootDir + dirTempName);
String fileName = Instant.now().getEpochSecond() + "-" + Md5Util.md5Short(IdUtil.genUUID()) + ".jpg";
File file = new File(rootDir + dirTempName + File.separator + fileName);
imageFile.transferTo(file);
return dirTempName + File.separator + fileName;
}
/**
* @param imageFile
* @param rootDir 路径
* @param dir 一级 文件名
* @return
* @throws IOException
*/
public static List saveImage(List imageFile, String rootDir, String dir) throws IOException {
//自生成一个文件路径
String dirTempName = File.separator + dir + File.separator + DateUtil.time2stringCurrent(DateUtil.FORMAT_STR_TWO);
// 真实路径
mkdir(rootDir + dirTempName);
List fileNames = new ArrayList<>();
for (MultipartFile multipartFile : imageFile) {
//图片名
String fileName = Instant.now().getEpochSecond() + "-" + Md5Util.md5Short(IdUtil.genUUID()) + ".jpg";
File file = new File(rootDir + dirTempName + File.separator + fileName);
multipartFile.transferTo(file);
fileNames.add(dirTempName + File.separator + fileName);
}
return fileNames;
}
public static void mkdir(String dirStr) {
File dir = new File(dirStr);
if (dir.exists()) {
if (!dir.isFile()) {
return;
}
dir.delete();
}
dir.mkdirs();
}
/**
* 删除服务上的文件
* @param filePath 路径
* @param fileName 文件名
*/
public static boolean deleteServerFile(String filePath, String fileName) {
boolean delete_flag = false;
File file = new File(filePath + fileName);
if (file.exists() && file.isFile() && file.delete()) {
delete_flag = true;
} else {
delete_flag = false;
}
return delete_flag;
}
} 调用saveImage （参数中带list的）即可，其实原理都一样 就是写个for循环然后进行逐个添加。
总体来说通过这次 多图上传 重点就在 前台如何将图片转换成base64，如何实现追加图片，删除图片。然后就是后台如何处理前台传过来的JSON的base64数据（我们需要导一个JSONArray jar）
net.sf.json-lib
json-lib
2.4
jdk15
然后我们再将base64转换成MultipartFile
然后我们就可以将他上传啦！
具体思路如下：
for(循环json类型的base64数组){
处理json类型的base64 转换成String
处理完将他转换成multidatafile
然后上传
}