记录一下在做一个报修功能的心路历程，需求功能很简单，一个表单提交，表单包含简单的文字字段以及图片
因为使用的是weui框架，前面的话去找weui的表单和图片上传组件，说实话，weui的组件写的还不错，作为一个不太懂前端的渣渣可以拿来开箱即用
主要是不用调那么多的样式问题，直接上代码：
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
<!-- <div class="weui-uploader__info">0/2</div>-->
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<!--<li class="weui-uploader__file" style="background-image:url(/img/upload-btn.png)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(/img/upload-btn.png)">
<div class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</div>
</li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(/img/upload-btn.png)">
<div class="weui-uploader__file-content">50%</div>
</li>-->
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
//文件上传js
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
//这里获取到批量的file
var fileNum =fileArr.length;
for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if(fileNum + i + 1 > 5) {
break;
}
// fileArr.push(file);
if(url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(e) {
var image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 5.5, //压缩后图片的大小
imageHeight = image.height / 5.5;
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
var data = {
base64: canvas.toDataURL('image/jpeg')
}
mui.ajax({
url: "/file/uploadBase64",
type: "POST",
async: false,
cache: false,
processData: false,// 不处理发送的数据
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(data),
success: function(res){
console.log(res)
if (res.code==100){
fileArr.push(res.data);
//上传完成，前端页面显示
$uploaderFiles.append($(tmpl.replace('#url#', canvas.toDataURL('image/jpeg'))));
}else {
weui.toast("出错了，请稍后再试", "forbidden");
}
},
error:function () {
weui.toast("出错了，请稍后再试", "forbidden");
}
});
}
}
}
checkPhotoSize();
});
//控制显示5张以内照片
function checkPhotoSize(){
if(fileArr.length>4){
$(".weui-uploader__input-box").hide();
}else{
$(".weui-uploader__input-box").show();
}
}
var index; //第几张图片
$uploaderFiles.on("click", "li", function() {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
//删除图片 删除图片的代码也贴出来。
$(".weui-gallery__del").click(function() {
console.log('删除'+index);
$uploaderFiles.find("li").eq(index).remove();
fileArr.splice(index,1);
checkPhotoSize();
});
这里有几个要注意的点
1、要实现多图片上传，对比了几个UI框架，感觉还是weui的样式做的最好看
2、考虑到图片大小问题，一开始我使用的是直接将图片文件以数组的形式post给后台，然后后台使用MultipartFile 数组接收，但是这导致有个问题，现在的手机拍照的图片都比较大，随便都有个3-5M一张图片，如果直接post给后台，用户体验不好（速度太慢了），同时也占用了服务器太多资源（主要是带宽和存储空间），所以必须前端先压缩后再上传
3、前端压缩目前能想到的是使用第三方工具接口（阿里或者七牛云端接口）；前端页面利用canvas，进行base64编码，然后发送给后端，显然用后者会比较合适
最后利用canvas将图片进行base64编码压缩，可以实现到将3-5M的图片图片压缩为100k内，目前实现的是每次上传图片都会保存在服务器上，删除图片的话没法同步删除服务器上的图片，但是这个问题不大，需要修改的话将这个上传服务器的请求搞到点击提交表单的时候再上传图片就好了
最后贴一下后端接收代码：
/**
* 上传图片信息,base64字符串格式
* @param map
* @param model
* @return
*/
@PostMapping(value = "uploadBase64")
@ResponseBody
public Map<String, Object> uploadBase64Image(@RequestBody Map<String, Object> map) throws ParseException, IOException {
Map<String, Object> imageMap = new HashMap<>();
String base64 = map.get("base64").toString();
MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64);
//获取文件保存路径
String fileSavePath = globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue();
String fileServerPath = globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue();
fileSavePath = fileSavePath + DateUtil.formatDatetime("yyyy-MM-dd");
fileServerPath = fileServerPath + DateUtil.formatDatetime("yyyy-MM-dd");
if (!file.isEmpty()) {
String fileName = file.getOriginalFilename();
String ext=fileName.substring(fileName.lastIndexOf(".")+1);
String imgName = "/"+UUID.randomUUID()+ "." +ext;
InputStream in = null;
OutputStream out = null;
try {
File serverFile = new File(fileSavePath+imgName);
//判断文件父目录是否存在
if(!serverFile.getParentFile().exists()){
serverFile.getParentFile().mkdir();
}
if (!serverFile.exists()) {
serverFile.createNewFile();
}
in = file.getInputStream();
out = new FileOutputStream(serverFile);
byte[] b = new byte[1024];
int len = 0;
while ((len = in.read(b))!=-1) {
out.write(b, 0, len);
}
out.close();
in.close();
String serverPath = fileServerPath + imgName;
return ResultUtil.successJson(serverPath);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage());
} finally {
if (out != null) {
out.close();
out = null;
}
if (in != null) {
in.close();
in = null;
}
}
} else {
return ResultUtil.errorJson(ErrorEnum.E_90007);
}
}
/**
* base64转MultipartFile文件
*
* @param base64
* @return
*/
public static MultipartFile base64ToMultipart(String base64) {
try {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = decoder.decodeBuffer(baseStrs[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
总结