1、首先先简单看一下项目中的前端图片部分代码和js
图片部分DIV
<div class="head-infor head-top">
<div class="infor-left">头像</div>
<div @click="handleHead()" class="infor-right">
<img id="img" class="infor-img" :src=headImg />
<img class="infor-join" :src=join />
</div >
</div>
图片上传部分js
uploads(c, d) {
var that = this
"use strict";
//获取选择图片的个数
var $c = document.querySelector(c),
$d = document.querySelector(d),
file = $c.files[0],
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
$d.setAttribute("src", e.target.result);
console.log("*****################################***********")
console.log(e.target)
imgs=e.target.result;
that.isFileCamra = false
};
},
},
imgs是一个全局变量 我用来获取图片转换成base64后的结果
imgs如下
2、ajax部分
需要注意 ajax要使用post的方式，而且向后台传送的数据要为json格式的，我的代码如下
$.ajax({
type : "POST",
url : requertUrl + '/test',
contentType : "application/json ; charset=utf-8",
dataType:"json",
data:JSON.stringify({
"img":imgs,"userId":"123456"
}),
success : function(result) {
},
error:function(result) {
},
})
3、后台接收以JsonObject方式接收
@RequestMapping("/test")
public String fileupdate(HttpServletRequest request, @RequestBody JSONObject json) {
try {
System.out.println("*****************");
Map<String,Object> map = new FileUploadUtils().jsonToMap(json);
System.out.println(map.get("userId"));
return "666";
} catch (Exception e) {
return "error";
}
}
}
图片上传的方法和JsonObject对象解析
将base64解析成图片并保存至服务器
/**
* @Author shanzz
* @Description //TODO 将base64转换成图片
* @Date 18:53 2019/3/26
* @Param [base64]
* @return boolean
**/
public static String base64ToImage(String base64) {// 对字节数组字符串进行Base64解码并生成图片
if (base64 == null){ // 图像数据为空
return "null";
}
BASE64Decoder base64Decoder = new BASE64Decoder();
createDir(ReadConfigUtils.getConfig("uploadFile"));
String rootpath = ReadConfigUtils.getConfig("uploadFile")+"/";
String fileType="jpg";
String filename = "pic"+System.currentTimeMillis()+"."+fileType;
String savepath= rootpath + filename;
try {
// byte[] bytes = base64Decoder.decodeBuffer(base64);
if(base64.contains("data:image/png;base64,")){
base64 = base64.replace("data:image/png;base64,","");
}else if(base64.contains("data:image/jpg;base64,")){
base64 = base64.replace("data:image/jpg;base64,","");
}else if(base64.contains("data:image/jpeg;base64,")){
base64 = base64.replace("data:image/jpeg;base64,","");
}else if(base64.contains("data:image/gif;base64,")){
base64 = base64.replace("data:image/gif;base64,","");
}
byte[] bytes = Base64.decodeBase64(base64);
// base64 = base64.replace("base64,","");
for (int i = 0; i < bytes.length; ++i) {
if (bytes[i] < 0) {// 调整异常数据
bytes[i] += 256;
}
}
// 生成图片
OutputStream out = new FileOutputStream(savepath);
out.write(bytes);
out.flush();
out.close();
return filename;
} catch (Exception e) {
System.out.println("生成图片失败：PhotoUtils.changeBase64()");
return "null";
}
}
解析JsonObject（用于单张图片上传）
/**
* @Author shanzz
* @Description //TODO 解析参数 用于单张图片上传
* @Date 14:39 2019/3/27
* @Param [jsonObject]
* @return java.util.Map<java.lang.String,java.lang.Object>
*
* 特别注意事项：
* 如果涉及图片上传 前台在传参数时请统一将参数名设置为img
**/
public Map<String,Object> jsonToMap(JSONObject jsonObject) {
Map<String,Object> maps = new HashMap<>();
Iterator<String> it = jsonObject.keys();
while(it.hasNext()) {
// 获得key
String key = it.next();
String value = jsonObject.getString(key);
if (key.equals("img")) {
String imgName = base64ToImage(value);
maps.put(key, imgName);
}
maps.put(key, value);
}
return maps;
}
我这里将我前台传的所有数据解析保存在了Map里面，用于去保存数据库中。
多张图片上传方法
<1>首先前台定义一个全局变量的数组、
var imgs=new Array();
存储图片转为base64后的数组
跟单张图片上传一样 这里同样以ajax 的post方式向后台传送json格式数据
后台接收方法 范例
@RequestMapping("/testArr")
public String fileupdateArr(HttpServletRequest request, @RequestBody JSONObject json) {
try {
Map<String,Object> map = new FileUploadUtils().jsonToMaps(json);
return "666";
} catch (Exception e) {
return "error";
}
多个图片的json解析
/**
* @Author shanzz
* @Description //TODO 解析参数 用于一个或多个图片上传
* @Date 14:39 2019/3/27
* @Param [jsonObject]
* @return java.util.Map<java.lang.String,java.lang.Object>
*
* 特别注意事项：
* 如果涉及图片上传 前台在传参数时请统一将参数名设置为img，传过来时图片为数组形式
**/
public Map<String,Object> jsonToMaps(JSONObject jsonObject) {
Map<String,Object> maps = new HashMap<>();
StringBuilder sb = new StringBuilder();
Iterator<String> it = jsonObject.keys();
while(it.hasNext()) {
// 获得key
String key = it.next();
if(key.equals("img")) {
JSONArray arr = (JSONArray) jsonObject.get(key);
String picName = "";
sb.append("\"");
for (int i = 0; i < arr.size(); i++) {
picName = base64ToImage(arr.listIterator(i).next().toString());
if (i < arr.size() - 1) {
sb.append(picName + ",");
} else {
sb.append(picName);
}
}
sb.append("\"");
maps.put(key, sb.toString());
System.out.println(sb.toString());
}else{
String value = (String) jsonObject.get(key);
maps.put(key, value);
}
}
return maps;
}
大致思想就是 前端利用方法将图片给转换成了base64的格式像后台传送，传送过程中需要以JSON.stringify({
“img”:imgs
}),
方式传送 不然过程中会产生跨域的问题（实践得出）
然后后台则需要以JSONObject的方式去接收数据，然后将JSONObject解析出来 去转码base64转存成图片保存
以上是根据我们自己项目中量身打造的 希望对大家有所借鉴 如果上面有哪些需要改进的地方请大家予以指正
版权声明：本文为szzzgyn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。