SpringBoot+WangEditor上传图片

今天本地在调试一个问题,,wangEditor这个富文本编辑器上传图片,其实上传图片到也没有什么困难的地方,关键是在于,后台是SpringBoot来进行接收图片,,不说了直接上代码:这个是前端的代码:

	var editor = new wangEditor('#txtDiv');
	editor.customConfig.uploadImgServer = localhostPaht+projectName+'/filecontroller/uploadImg';
	editor.customConfig.uploadImgShowBase64 = true;
/*	editor.customConfig.uploadImgFileName = 'myFileName';*/
	editor.customConfig.uploadFileName = 'myFileName';
	editor.customConfig.showLinkImg = false;
/*	editor.customConfig.debug=true;*/
	editor.customConfig.uploadImgHooks = {
			success: function (xhr, editor, result) {
	
		    }
	}
	editor.create();

那么后台应该如何进行编写:

	@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
	@ResponseBody
	public void uploadImg(@RequestParam(value = "myFileName", required = false) MultipartFile cardFile,
			HttpServletRequest request, HttpServletResponse response) {
		    System.out.println("*************接收上传文件*************");
		try {
			if (cardFile != null) {
				String oldFileName = cardFile.getOriginalFilename();// 获取文件名称
				SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
				String newFileName = sdf.format(new Date()) + "_" + oldFileName;
				String realPath = PropertiesUtil.getValue("FILEPATH", "fileconfig.properties");
				File targetFile = new File(realPath, newFileName);
				// 检测是否存在目录
				if (!targetFile.getParentFile().exists()) {
					targetFile.getParentFile().mkdirs();
				}
				// cardFile.transferTo(targetFile);
				BufferedOutputStream out1 = new BufferedOutputStream(new FileOutputStream(targetFile));
				out1.write(cardFile.getBytes());
				out1.flush();
				out1.close();
				if(targetFile.exists()){
					System.out.println("文件已经存在");
				}
				JSONObject json = new JSONObject();
				JSONArray arr = new JSONArray();
				String ipconfigstr = PropertiesUtil.getValue("IPCONFIG", "fileconfig.properties");
				String imgUrl = "http://" + ipconfigstr + "/Sqzp/images/" + newFileName;
				arr.add(imgUrl);
				json.put("errno", 0);
				json.put("data", arr);
				response.setContentType("text/text;charset=utf-8");
				PrintWriter out = response.getWriter();
				out.print(json.toString());
				out.flush();
				out.close();
			} else {
				System.out.println("************上传文件为空***************");
			}
			System.out.println("*************接收上传文件结束*************");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

 但是也存在一个问题就是在Ecplise进行开发的过程中,上传到图片是没有办法直接回显到编辑器上的,但是可以看到的是但是当我们更新到服务器上面之后会发现,图片是可以正常的显示到编辑器上面的

wangEditor  + SpringBoot 是可以正常的显示出来的

如果大家有什么疑问可以下面加我的微信,欢迎一起学习交流:

                                                                     SpringBoot+WangEditor上传图片_第1张图片

 

你可能感兴趣的:(java)