大家好,又见面了,我是你们的朋友全栈君。
base64编码图片数据存储服务器
如果直接提交base64编码图片数据,过大的话后台会出现转发错误问题。
我在刚开始接触base64编码图片数据时,就是把base64编码图片数据传到后台来解码生成图片。导致生成的图片无法打开,后来才发现其实传到后台的base64编码根本就不完整,导致解码出现问题,无法显示图片。所以,base64编码只能在前端处理。
后来查阅资料,看见一个不错的解决方式就是将base64编码的图片数据转换为Blob(与File相似)并添加到form中提交。下面是代码:
$(".avatar-save").on("click", function() {
var img_lg = document.getElementById('imageHead');
// 截图小的显示框内的内容
html2canvas(img_lg, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL("image/png");
var newImg = document.createElement("img");
newImg.src = dataUrl;
imagesAjax(dataUrl);//提交base64图片数据
}
});
})
//dataUrl base64图片数据
function imagesAjax(dataUrl) {
//这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
var formData = new FormData();//var formData = new FormData(form);
//convertBase64UrlToBlob函数是将base64编码转换为Blob
//append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
formData.append("ImgBase64",convertBase64UrlToBlob(dataUrl));
console.log(formData);
//ajax 提交form
$.ajax({
url:'uploadImage.action',
type:'POST',
data:formData,
dataType:"text",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success: function(data) {
top.layer.alert("头像更新成功!");
window.location.reload();//刷新当前页面
},
error:function(){
top.layer.alert("头像更新失败,请检查网络后重试!")
}
});
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
最后注意的是,因为提交到后台的是Blob类型的数据,没有文件名称,需要强制重新命名名称及类型。
我这里采用的是springMVC注解的方式 接收请求。通过org.springframework.web.multipart.MultipartHttpServletRequest 就可以拿到文件。
/**
*添加/更新/替换图片
* @param request
* @return
*/
@ResponseBody
@RequestMapping(method = RequestMethod.POST,value="information/uploadImage")
public String uploadImage(HttpServletRequest request,HttpSession session){
String basePath = request.getSession().getServletContext().getRealPath("upload");
Manager manager= (Manager)session.getAttribute("manager");
JSONObject obj = new JSONObject();
//将文件交给文件处理工具类处理
List<Map<String, String>> fileName = UploadFileUtil.uploadBlodImage(request,"/image");
Accessory accessory = new Accessory();
for (Map<String, String> map : fileName) {
//取出用户名称
accessory.setAccessoryName(map.get("fileName"));
//取出路径别名
accessory.setUuidFileName(map.get("newFilePath"));
//取出上传文件大小
accessory.setValueSize(map.get("valueSize"));
//将资源附件进行存储并返回附件关联代码
managerService.addOrUpdateManagerToAccessory(accessory, manager.getId(), basePath);
}
return obj.toString();
}
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/129385.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...