后台代码，主要是SpringMVC 接收多文件上传，不是用的MutilFiles 方式，主要是因为MUI 5+ 不支持文件上传的Key是同一个名字
private String saveFile(MultipartFile file, HttpServletRequest request){
String path= "";
try {
byte[] bytes = file.getBytes();
// 当前app根目录
String rootPath = request.getServletContext().getRealPath("/");
// 需要上传的相对地址（application.properties中获取）
String relativePath = env.getProperty("image.file.upload.dir");
// 文件夹是否存在，不存在就创建
File dir = new File(rootPath + File.separator + relativePath);
if (!dir.exists())
dir.mkdirs();
String fileExtension = getFileExtension(file);
// 生成UUID样式的文件名
String filename = java.util.UUID.randomUUID().toString() + "." + fileExtension;
// 文件全名
String fullFilename = dir.getAbsolutePath() + File.separator + filename;
// 用户头像被访问路径
String relativeFile = relativePath + filename;
// 保存图片
File serverFile = new File(fullFilename);
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
stream.write(bytes);
stream.close();
LOGGER.info("Server File Location = " + serverFile.getAbsolutePath());
String serverPath = new URL(request.getScheme(), request.getServerName(), request.getServerPort(),
request.getContextPath()).toString();
return relativeFile;
} catch (Exception e) {
LOGGER.info("error: {}", e);
}
return path;
}
@Override
public Object uploadImage( HttpServletRequest request) {
CommonsMultipartResolver cmr = new CommonsMultipartResolver(
request.getServletContext());
if (cmr.isMultipart(request)) {
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) (request);
Iterator<String> files = mRequest.getFileNames();
String imgPath = "";
while (files.hasNext()) {
MultipartFile mFile = mRequest.getFile(files.next());
if (mFile != null) {
String fileName = UUID.randomUUID() + mFile.getOriginalFilename();
String path = saveFile(mFile,request);
imgPath += path +";";
}
}
}
return null;
}
前台代码
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/feedback-page.css"/> <style> .dynamic_images {
width: 100%;
} .dynamic_images ul {
margin: 0;
padding: 10px;
} .dynamic_images ul li {
float: left;
list-style: none;
width: 75px;
} .dynamic_images ul li img {
width: 98%;
height: 75px;
} .mui-input-group .mui-input-row {
height: 40px;
}
.mui-input-row {
position: relative;
} mui.min.css:5
.mui-input-row {
clear: left;
overflow: hidden;
}
h5 {
margin: 5px 7px;
} .mui-page-content { width: 100%;
height: 100%;
background-color: #efeff4;
}
.feedback p {
padding: 10px 15px 0;
font-size: 16px;
margin-top: 0;
margin-bottom: 10px;
color: #000;
}
.feedback textarea {
height: 160px;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
</style>
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">新装设备</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;">
<form class="mui-input-group"> <div class="mui-input-row">
<label>车牌号</label>
<input type="text" class="mui-input-clear" id="platenum" data-input-clear="15" disabled="true" value="京NBU035">
</div> <div class="mui-input-row">
<label>设备编号</label>
<input type="text" class="mui-input-clear" id="imei" data-input-clear="15" placeholder="请输入设备的IMEI">
</div> <div class="feedback">
<input type="hidden" id="image-path" value="">
<p>安装图片</p>
<div class="dynamic_images">
<ul>
<li><img src="data:images/iconfont-tianjia.png" id="addnew"></li>
</ul>
</div>
</div> <div class="mui-button-row" style="clear: both;">
<button id="saveBtn" type="button" class="mui-btn mui-btn-primary">确认</button>
<button type="button" class="mui-btn mui-btn-danger">取消</button>
</div>
</form>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src='js/feedback.js'></script>
<script src='js/jquery-1.12.4.min.js'></script>
<script src="js/app.js"></script>
<script>
var files = [];
(function($, doc) {
mui.init({
swipeBack: true //启用右滑关闭功能
}); document.addEventListener("plusready", plusReady, false); function plusReady() {
var wv = plus.webview.currentWebview();
document.getElementById("addnew").addEventListener("tap", function() {
showActionSheet();//拍照还是相册
});
document.getElementById("platenum").value = wv.platenum; plus.nativeUI.closeWaiting(); }
}(mui, document)); document.getElementById("saveBtn").addEventListener('tap', function() {
upload();
}); // 上传文件
function upload() { var platenum = document.getElementById('platenum').value;
var imei = document.getElementById('imei').value;
var task = plus.uploader.createUpload('http://192.168.8.101:8989/api/v1/vehicle/uploadImage', {
method: "POST"
},
function(t, status) { //上传完成
if (status == 200) {
var result =jQuery.parseJSON(t.responseText);
mui.toast(result.message); } else {
console.log("上传失败：" + status);
}
}
); for (var i = 0; i < files.length; i++) {
var f = files[i];
task.addFile(f.path, {
key:f.name
}); }
task.addData('platenum',platenum);
task.addData('imei',imei);
task.start(); } // 添加文件
var index = 1;
var newUrlAfterCompress;
function appendFile(p) {
files.push({
path: p,
name: "uploadkey_" + index
});
index++;
}
// 产生一个随机数
function getUid() {
return Math.floor(Math.random() * 100000000 + 10000000).toString();
} function galleryImgs() { // 从相册中选择图片
plus.gallery.pick(function(e) {
//$(".dynamic_images ul li").remove(".pickimg");
console.log("选择了"+e.files.length+"个图片");
for (var i = 0; i < e.files.length; i++) {
if (i < 9) {
$(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + e.files[i] + "' /></li>");
var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径
newUrlAfterCompress=compressImage(e.files[i],dstname);
appendFile(dstname);
}
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true
});
} //压缩图片，这个比较变态的方法，无法return
function compressImage(src,dstname) {
//var dstname="_downloads/"+getUid()+".jpg";
plus.zip.compressImage({
src: src,
dst: dstname,
overwrite:true,
quality: 20
},
function(event) {
//console.log("Compress success:"+event.target);
return event.target;
},
function(error) {
console.log(error);
return src;
//alert("Compress error!");
}); } function showActionSheet() {
var bts = [{
title: "拍照"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
getImage();
} else if (e.index == 2) {
galleryImgs();
}
}
);
}
//拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var localurl = entry.toLocalURL(); //
//$(".dynamic_images ul li").remove(".pickimg");
$(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + localurl + "' /></li>");
var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径
newUrlAfterCompress=compressImage(localurl,dstname);
appendFile(dstname);
});
});
}
</script>
</body>
</html>