MUI+AJAX+Spring MVC 实现照片拍摄和本地相册选取上传

（1）首先贴上的是JS代码

*拍照上传*/

function getImage() {

var camera = plus.camera.getCamera();
//生成时间戳
var timestamp = Date.parse(new Date());
camera.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e,function(entry){
console.log('获取图片地址');
var imgUrl = entry.toLocalURL();
console.log("imgURL  "+imgUrl);
/*调用上传图片方法*/
uploadHead(imgUrl);
},function(e){
console.log("读取拍照文件错误：" + e.message);
mui.alert("读取拍照文件错误");
},function(e){
console.log("调用摄像头异常：" + e.message);
mui.alert("调用摄像头异常");
},{
filename: timestamp+"-img.png"
});
});

}

 

/*本地相册上传*/
function galleryImg() {
console.log("打开相册");
//生成时间戳
var timestamp = Date.parse(new Date());
plus.gallery.pick(function(img) {
console.log("选取图片相册");
plus.io.resolveLocalFileSystemURL(img,function(entry){
console.log("获取图片地址");
var imgUrl = entry.toLocalURL();
/*调用上传图片方法*/
uploadHead(imgUrl);
},function(e){
console.log("读取图片错误：" + e.message);
mui.alert("读取图片错误");
},function(e){
console.log("选取图片异常：" + e.message);
mui.alert("选取图片异常");
},{
filename: timestamp+"-img.png"
});


});

};

//上传图片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath);
// mainImage.src = imgPath;
// mainImage.style.width = "60px";
// mainImage.style.height = "60px";


var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
console.log("imgData"+imgData);
/*在这里调用上传接口*/
$.ajax({
url:baseURL+“/imgeupload”,
data:{
"imgBase64Data":imgData
},
dataType: 'json',
type: 'post',
timeout: 10000,
success: function(data) {
console.log('上传成功');
},
error: function(xhr, type, errorThrown) {
console.log(errorThrown);
mui.toast('网络异常，请稍后再试！');
}
});
}
}

//将图片压缩转成base64
function getBase64Image(img) {
//绘制图形
var canvas = document.createElement("canvas");
var width = img.width;
console.log(width);
var height = img.height;
console.log(height);
// 这里对图片大于300*400的进行压缩
if(width > height) {
if(width > 300) {
height = Math.round(height *= 300 / width);
width = 300;
}
} else {
if(height > 400) {
width = Math.round(width *= 400 / height);
height = 400;
}
}
canvas.width = width; /*设置新的图片的宽度*/
canvas.height = height; /*设置新的图片的长度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*绘图*/
var dataURL = canvas.toDataURL("image/png", 0.5);
console.log(dataURL);
return dataURL.replace("data:image/png;base64,", "");
}

（2）后台处理代码

@ResponseBody
@RequestMapping( value = "/img_upload")
public WrapperResponseEntity imgUpload(@RequestParam String imgBase64Data, HttpServletRequest request){
    WrapperResponseEntity entity = new WrapperResponseEntity();
    try {

        if(imgBase64Data == null || "".equals(imgBase64Data)){
                entity.setData("上传失败，上传图片数据为空！");
        }
       String projectPath = request.getSession().getServletContext().getRealPath("/");
        String context = request.getContextPath();
        String imgFilePath ="/userfiles/images/";
        File uploadPathFile = new File(projectPath+imgFilePath);

        //创建父类文件
        if(!uploadPathFile.exists() && !uploadPathFile.isDirectory()){
            uploadPathFile.mkdirs();
        }
        File imgeFile = new File(projectPath+imgFilePath,new Date().getTime()+".jpg");
        if(!imgeFile.exists()){
            imgeFile.createNewFile();
        }

        //对base64进行解码
        byte[] result = Encodes.decodeBase64(imgBase64Data);
        //使用Apache提供的工具类将图片写到指定路径下
        FileUtils.writeByteArrayToFile(imgeFile,result);
        entity.setData(imgFilePath+imgeFile.getName());
        System.out.println(imgFilePath+imgeFile.getName());
    }catch (Exception e){
        e.printStackTrace();
        entity.setData("上传失败，系统异常");
    }
    return entity;
}

/**
 * Base64解码.
 */
public static byte[] decodeBase64(String input) {
   return Base64.decodeBase64(input.getBytes());
}

说明：这里只能实现单张图片的上传。