轉載 https://blog.csdn.net/qq_29407683/article/details/80007643#commentBox
前端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script src="../js/app-con.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<style>
</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>
<a class="mui-icon-right-nav mui-pull-right">
<span id="headImage" class="mui-icon mui-icon-camera"></span>
</a>
<a class="mui-icon-right-nav mui-pull-right">
<span id="uploadImage" class="mui-icon mui-icon-upload"></span>
</a>
</header>
<div class="mui-content" style="background-color:#fff">
<ul id="imgs" class="mui-table-view mui-grid-view">
<!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="images/shuijiao.jpg">
<span class="mui-icon mui-icon-trash deleteBtn"></span>
<div class="mui-media-body">
<input type="text" class="remark" placeholder="備註">
</div>
</a>
</li>-->
</ul>
</div>
<script>
var fileArr = [];
mui.init({
swipeBack: true //啓用右滑關閉功能
});
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var buttonTit = [{
title: "拍照"
}, {
title: "從手機相冊選擇"
}];
plus.nativeUI.actionSheet({
title: "上傳圖片",
cancel: "取消",
buttons: buttonTit
}, function(b) { /*actionSheet 按鈕點擊事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg(); /*打開相冊*/
break;
default:
break;
}
})
}
}, false);
// 拍照獲取圖片
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到圖片路徑
setFile(imgSrc);
setHtml(imgSrc);
}, function(e) {
console.log("讀取拍照文件錯誤：" + e.message);
});
}, function(s) {
console.log("error" + s.message);
}, {
filename: "_doc/camera/"
})
}
// 從相冊中選擇圖片
function galleryImg() {
// 從相冊中選擇圖片
plus.gallery.pick(function(e) {
for (var i in e.files) {
var fileSrc = e.files[i];
setFile(fileSrc);
setHtml(fileSrc);
}
}, function(e) {
console.log("取消選擇圖片");
}, {
filter: "image",
multiple: true,
//maximum: 5,
system: false,
onmaxed: function() {
plus.nativeUI.alert('最多隻能選擇5張圖片');
}
});
}
function setHtml(path) {
var str = '';
str = '<li class="mui-table-view-cell mui-media mui-col-xs-6">' +
'<img class="mui-media-object" src="' + path + '">' +
'<span class="mui-icon mui-icon-trash deleteBtn"></span>' +
// '<div class="mui-media-body">'+
// '<input type="text" class="remark" placeholder="備註">'+
// '</div>'+
'</li>';
jQuery("#imgs").append(str);
}
function setFile(fileSrc) {
var image = new Image();
image.src = fileSrc;
fileArr.push(image);
}
document.getElementById('uploadImage').addEventListener('tap', function() {
var files = fileArr;
var wt = plus.nativeUI.showWaiting();
var server = appConfig.serverPath + "/api/upload";
var task = plus.uploader.createUpload(server, {
method: "POST" , multiple: true
},
function(t, status) { //上傳完成
if (status == 200) {
alert("上傳成功：" + t.responseText);
wt.close(); //關閉等待提示按鈕
} else {
alert("上傳失敗：" + status);
wt.close(); //關閉等待提示按鈕
}
}
);
//將文件集合添加到上傳隊列中
console.log("文件數量："+files)
for (var i = 0; i < files.length; i++) {
var f = files[i];
task.addFile(f.src, {
key: "file"+i //相同的key在後端只能拿到一張，所以要設置不同的key
});
}
//傳其他的參數 如備註
//添加其他參數
//遍歷5個input框
task.addData("name", "test");
task.start();
});
</script>
</body>
</html>
後端：
@ResponseBody
@PostMapping("upload")
public void upload(HttpServletResponse response, MultipartHttpServletRequest request) throws IOException {
List<MultipartFile> multipartFiles = request.getFiles("file");
int i = 0;
for (MultipartFile file : multipartFiles) {
if (file == null || file.getBytes() == null) {
throw new BusinessException(ErrCodeConstants.Default.FILE_NOT_EXIST);
}
FileUploadUtil.writeFileByFilePath(file.getBytes(), file.getOriginalFilename(),
FileUploadUtil.FILE_TYPE_ALL, null);
i++;
}
renderText(response, FastJSONHelper.serialize(i));
}