需求:單獨的H5頁面實現手繪簽名,然后上傳服務器,並修改數據,首先項目中是掃碼跳轉到H5頁面,那鏈接中需要帶參數,怎么截取參數?下面是截取路徑,獲得值
var varurl = window.location.search; //獲取url中"?"符后的字串 if (varurl.indexOf("?") != -1) { //判斷是否有參數 varstr = varurl.substr(1); //從第一個字符開始 因為第0個是?號 獲取所有除問號的所有符串 var strs = varstr.split("="); //用等號進行分隔 (因為知道只有一個參數 所以直接用等號進分隔 如果有多個參數 要用&號分隔 再用等號進行分隔) console.log(strs[1]); //直接彈出第一個參數 (如果有多個參數 還要進行循環的) id = strs[1]; }
接下來就是后台接受字節碼並轉換成文件上傳了:
@RequestMapping(value = "/uploadBase64", method = {RequestMethod.POST}) @ResponseBody public Object uploadBase64(HttpServletRequest request, HttpServletResponse response) throws Exception { String base64String = request.getParameter("signatureBase64"); if (StringUtils.isBlank(base64String)) { return new JsonResult(false, "上傳失敗", ""); } logger.info("======開始上傳圖片======"); String imgUrl = ""; String msg = ""; Boolean result = false; MultipartFile file = Base64DecodMultipartFileUtil.base64ToMultipart(base64String); if (Objects.nonNull(file)) { try { String path = getCompleteImgPath(request, file); imgUrl = path.replace("\\", "/"); result = true; msg = SysCode.SUCCESS.getDesc(); logger.info("======圖片上傳成功,路徑======" + path.replace("\\", "/")); } catch (Exception e) { logger.error("圖片上傳失敗:" + e.getMessage(), e); e.printStackTrace(); msg = "上傳失敗!"; } } else { logger.error("圖片上傳失敗"); } logger.info("======圖片上傳結束======"); return new JsonResult(result, msg, imgUrl); }
//base64轉文件
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 Base64DecodMultipartFileUtil(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
//獲取文件路徑
public static String getCompleteFilePath(HttpServletRequest request, MultipartFile uploadFile) throws Exception {
String logoPathDir = SysConstants.TOMCAT_FILE_URL;
/**
* 得到文件保存目錄的真實路徑
*/
String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);
/**
* 根據真實路徑創建目錄
*/
File logoSaveFile = new File(logoRealPathDir);
if (!logoSaveFile.exists()) {
logoSaveFile.mkdirs();
}
/**
* 獲取文件的后綴
*/
System.out.println(uploadFile.getOriginalFilename());
String suffix = uploadFile.getOriginalFilename().substring(uploadFile.getOriginalFilename().lastIndexOf("."));
/**
* 使用UUID生成文件名稱
*/
String imageName = RandomUtil.getUuid() + suffix;// 構建文件名稱
/**
* 拼成完整的文件保存路徑加文件
*/
String fileName = logoRealPathDir + File.separator + imageName;
File file = new File(fileName);
uploadFile.transferTo(file);
FileChannel in = null;
FileChannel out = null;
FileInputStream inStream = null;
FileOutputStream outStream = null;
try {
inStream = new FileInputStream(file);
outStream = new FileOutputStream(PathUtil.getImgBasePath() + File.separator + imageName);
in = inStream.getChannel();
out = outStream.getChannel();
in.transferTo(0, in.size(), out);
} catch (IOException e) {
e.printStackTrace();
} finally {
inStream.close();
in.close();
outStream.close();
out.close();
}
return PathUtil.getImgPath(imageName);
}