MUI APP上传图片之连接后端（前后端汇总）

1. 页面

   <div class="mui-input-row">
   	<label>上传图片</label>
   	<div class="mui-button-row">
   		<button type="button" id="gallery" class="mui-btn mui-btn-primary" onclick="return false;" style="float: left;width: 90px;">点击上传</button>&nbsp;&nbsp;
   	</div>
   </div>
   

2. js

   //获取标签对象
   var displayPhoto = document.getElementById("displayPhoto");
   var galleryBtn = document.getElementById("gallery");
   //定义一个数组 用来存储图片转成Base64数据
   var imgArray = new Array();
   
   galleryBtn.addEventListener("tap", function() {
   		plus.gallery.pick(
   			/*执行成功*/
   			function(path) {
   				var img = "<img width=100% id=picture height=100 src=" + path + ">";
   				displayPhoto.innerHTML = img;
   				picture.onload = function() {
   					var data = getBase64Image(picture); //base64编码
   					var newImgbase = data.split(",")[1]; //通过逗号分割到新的编码
   					imgArray.push(newImgbase); //新的编码放到imgArray数组里面
   					uploadimg(imgArray); //执行上传
   				}
   			},
   			/*执行失败*/
   			function(e) {
   				displayPhoto.innerHTML = "读取出错，请重试"
   			}, {
   				filter: "image",
   			}
   		)
   	})
   //base64编码  
   function getBase64Image(img) {
   	var canvas = document.createElement("canvas"); //创建canvas DOM元素，并设置其宽高和图片一样
   	canvas.width = img.width;
   	canvas.height = img.height;
   	var ctx = canvas.getContext("2d");
   	ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图
   	var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); //动态截取图片的格式
   	var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式
   	return dataURL;
   }
   //上传图片
   function uploadimg(imgArray) {
   	//这里就可以把添加过图片的imgArray通过JSON解析成字符串，然后上传给服务器
   	var imgJson = JSON.stringify(imgArray);
   	var url = IP + 'file/uploadCasePhoto';
   	mui.ajax(url, {
   		data: {
   			pic: imgJson
   		},
   		type: 'post',
   		timeout: 10000,
   		dataType: 'json',
   		headers: {
   			'Content-Type': 'application/json'
   		},
   		success: function(data) {
   			if(data.result == true) {
   				//隐藏的表单 用来存放后端接收图片的路径
   				document.getElementById("saveSrc").value = data.src;
   				mui.toast('上传成功');
   			} else {
   				mui.toast('上传失败');
   			}
   		},
   		error: function(xhr, type, errorThrown) {
   			mui.toast('错误');
   		}
   	});
   }
   

3. 后端接收
   • Controller

      @RequestMapping("uploadCasePhoto")
     public Map<String, Object> uploadCasePhoto(HttpServletRequest request, @RequestBody Map<String, Object> map) {
     Map<String, Object> outMap = new HashMap<String, Object>();
     // 截取从前端传来的数组中的base64的值
     String imgStr = ((String) map.get("pic")).split("\"")[1];
     String pathString = SaveData.casePath;
     String dirName = RandomUtils.getCurrentDateForString(); // 构造文件夹对象
     File dirFile = new File(pathString, dirName);
     if (!dirFile.exists()) {
         dirFile.mkdirs();// 创建文件夹
     }
     // 给图片取名字
     String newName = RandomUtils.createFileNameUseTime();
     // 图片最终路径
     String newUrl = pathString + dirName + "/" + newName;
     Boolean flagBoolean = APPFileUtils.GenerateImage(imgStr, newUrl);
     if (flagBoolean == true) {
         outMap.put("src", dirName + "/" + newName);
         outMap.put("result", true);
     } else {
         outMap.put("result", false);
     }
     return outMap;
     }
     	```
     

   • 涉及工具方法

     /**
      * 得到当前日期
      */
     public static String getCurrentDateForString() {
     	return sdf1.format(new Date());
     }
     /**
      * 生成文件名使用时间+4位随机数
      * @param suffix 文件名称
      */
     public static String createFileNameUseTime() {
     	String fileSuffix=".jpg";
     	String time=sdf2.format(new Date());
     	Integer num=random.nextInt(9000)+1000;
     	return time+num+fileSuffix;
     }
     
     /**
      * 将Base字符串转化成图片 存储在本地
      * @param imgStr
      * @param imgFilePath
      * @return
      */
     public static boolean GenerateImage(String imgStr, String imgFilePath) {
     if (imgStr == null) // 图像数据为空
         return false;
     BASE64Decoder decoder = new BASE64Decoder();
     try {
         // Base64解码
         byte[] bytes = decoder.decodeBuffer(imgStr);
         for (int i = 0; i < bytes.length; ++i) {
     	if (bytes[i] < 0) {// 调整异常数据
     	    bytes[i] += 256;
     	}
         }
         // 生成jpeg图片
         OutputStream out = new FileOutputStream(imgFilePath);
         out.write(bytes);
         out.flush();
         out.close();
         return true;
     } catch (Exception e) {
         return false;
     }
     }