HTML5+jSignature插件手写签名生成图片并转换成文件流实现服务器上传功能

项目结构：html+vue+springboot
html引入VUE项目vue.min.js、jQuery的jquery-3.4.1.min.js，签名：modernizr.js、jSignature.min.js、jSignature.min.noconflict.js，手机端mui.min.js，弹窗样式：mustache.js、zeroModal.js

所用的js在这里

  
	
    
    
    
	
	
	
    
	  
  
  
    

		

			

				


				签到
			
			

				

					

						
*手机号：
					    

					    	
					    
					
					

						
*验证码：
					    

					    	
							获取验证码
							剩余时间{{count}}s
					    
					
				
				

					

						

							*签名：
							
						
						预览签名
						重置签名
						

							

								

							
						
					
				
				提交签到
			
			

		
	
    
	
	
	
    
    
    
	
	
    
  
  

@ApiOperation("手机端保存签名图片")
    @RequestMapping(value = "/upLoadItemImage", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
    public @ResponseBody AjaxResult upLoadItemImage(HttpServletRequest request, HttpServletResponse response){
        try {
        //这个是图片保存表的外键id
            String businessid=request.getParameter("businessid");
            if (StringUtils.isEmpty(businessid))
            {
                return AjaxResult.error("缺少必要参数");
            }
            String userName = "";
            Date now = Date.from(Instant.now());
            boolean istrue=false;
            //附件表
            SysAttachment attachment = new SysAttachment();
            // 判断 request 是否有文件上传,即多部分请求
            if (multipartResolver.isMultipart(request)) {
                // 转换成多部分request
                MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) multipartResolver.resolveMultipart(request);
                // 取得request中的所有文件名
                Iterator iter = multiRequest.getFileNames();
                while (iter.hasNext()) {
                    // 记录上传过程起始时的时间，用来计算上传时间
                    int pre = (int) System.currentTimeMillis();
                    // 取得上传文件
                    MultipartFile file = multiRequest.getFile(iter.next());
                    if (file != null) {
                        // 取得当前上传文件的文件名称
                        String fileName = file.getOriginalFilename();
                        // 如果名称不为“”,说明该文件存在，否则说明该文件不存在
                        if (fileName.trim() != "") {
                            //获取原始文件名、后缀和文件大小
                            long size = file.getSize()/ 1024;
                            String extension = FileUploadUtils.getExtension(file);
                            // 上传并返回新文件路径名称 YaWeiConfig.getUploadPath()是上传的路径比如D:/ruoyi/xxx
                            String pathFileName = FileUploadUtils.upload(YaWeiConfig.getUploadPath(), file);
                            attachment.setFileName(fileName);
                            //附件类型
                            attachment.setModule(WhythConstants.TRAIN.HANDWRITE_SIGN_IN_MUDOLE);
                            attachment.setBusinessid(businessid);
                            attachment.setPath(pathFileName);
                            attachment.setAttachmentSize(size);
                            attachment.setSuffix(extension);
                            attachment.setCreateBy(userName);
                            attachment.setCreateTime(now);
                            attachment.setUpdateBy(userName);
                            attachment.setUpdateTime(now);
                            istrue=iSysAttachmentService.save(attachment);
                        }
                    }
                }
            }
            if(istrue){
                return AjaxResult.success(attachment);
            }else{
                return AjaxResult.error("上传失败!");
            }
        } catch (Exception e) {
            e.printStackTrace();
            logger.error("上传失败：", e);
            return AjaxResult.error("签名图片保存失败！失败信息："+e.getMessage());
        }
    }