Spring MVC 中让Simditor富文本编辑器实现上传本地图片并返回上传的图片地址

作者:超级无敌大飞   阅读 (5065)  |  收藏 (0)  |  点赞 (0)

摘要

本文讲解在Spring MVC 中让Simditor富文本编辑器实现上传本地图片功能,同时 配置上传的图片保存地址.


原文链接:Spring MVC 中让Simditor富文本编辑器实现上传本地图片并返回上传的图片地址

Simditor富文本编辑器是一个基于bootstrap的扁平化、轻量级的富文本编辑插件,功能和UI界面都不错,官方文档说支持本地上传,但是有一点不好的是官方文档关于如何实现图片本地上传,很模糊,就简单的一句话:

upload (default: false) - Accept false or key - value pairs. Extra options for uploading images. e.g. 'url', 'params'

真是实现此功能还是 需要细致的去不断尝试一下,本文就来说说如何在Spring MVC 中让Simditor富文本编辑器实现上传本地图片。

网上有很多实现Simditor上传本地图片的资料,要么模糊不清,要么代码不全面,使用者根本无法知道具体怎么实现,现在我把自己开发过程中的经验分享出来,供大家学习使用。

其实很多地方光看官方的文档说的很模糊,不如自己查看插件的源码,在我分享这段代码的时候,我就分析了Simditor插件的源码。

是不是 大家想实现上传本地图片功能,但是又不知道如何传参,如何在后台 代码中返回上传结果?来,咱们先看看Simditor插件部分源码:

Simditorjs部分源码如下:

if (typeof result !== 'object') {
          try {
            result = $.parseJSON(result);
          } catch (_error) {
            e = _error;
            result = {
              success: false
            };
          }
        }
        if (result.success === false) {
          msg = result.msg || _this._t('uploadFailed');
          alert(msg);
          img_path = _this.defaultImage;
        } else {
          img_path = result.file_path;
        }

就会发现一个情况,它上传完毕图片后,去接收到一个json格式的后台 处理结果,这个结果包含success参数和msg参数,以及file_path参数。这三个参数表达的 意思如下:


success:上传结果是否成功,值为false 或者true

msg:如果上传失败,则获取本参数中的错误信息,提示给用户

file_path:如果上传成功,则获取后台 处理的上传文件保存的地址


综上所述,我们就会发现,只要在后台中返回的处理结果包含这三个参数,并返回就可以实现Simditor上传图片,并知道后台逻辑保存的图片位置。


首先加载Simditor富文本编辑器插件

<link rel="stylesheet" type="text/css"
	href="<%=path%>/components/simditor/styles/simditor.css" />

<script type="text/javascript"
	src="<%=path%>/components/simditor/scripts/module.js"></script>
<script type="text/javascript"
	src="<%=path%>/components/simditor/scripts/hotkeys.js"></script>
<script type="text/javascript"
	src="<%=path%>/components/simditor/scripts/uploader.js"></script>
<script type="text/javascript"
	src="<%=path%>/components/simditor/scripts/simditor.js"></script>

注意 ,请不要忘记引入jquery.js文件。

在页面中写一个文本域

<textarea class="form-control" style="resize:none;" rows="4" 
    id="resourceContent" name="resourceContent"></textarea>				

然后初始化Simditor

var editor = new Simditor({
    textarea: $('#resourceContent'),
    placeholder :"详细说明资源优点、使用方法,建议填写!",
    upload:{
        url: '/resource/savePic', //文件上传的接口地址
        params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
        fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
        connectionCount: 1,
        leaveConfirm: '正在上传图片...'
     }
        
});

后台controller代码如下:

/**
 * 上传资源时,上传图片
 * @param file
 * @param request
 * @param response
 */
@RequestMapping("/savePic")
@ResponseBody
public Map<String, Object> SavePic(@RequestParam(value = "fileDataFileName") MultipartFile file,HttpServletRequest request,
			HttpServletResponse response){
   return resourceService.saveImg(file);
}

serviced代码如下:

	/**
	 * 保存上传的图片
	 * @param file
	 * @return
	 */
	@Override
	public Map<String, Object> saveImg(MultipartFile file) {
		Map<String, Object> resultMap = new HashMap<String, Object>();
		if (file != null) {
		      // 1、由于在上传时虽然默认是img,但是用户可以修改上传类型,从而上传了其他格式文件,因此
			// 需要通过fileName的后缀判断文件是否是图片类型,以及图片大小
			String fileName = file.getOriginalFilename();
			String[] names = fileName.split("\\.");
			String fixName = names[names.length - 1];
			String[] typeArray = { "jpg", "jpeg", "png", "bmp", "gif" };
			boolean result = false;
			for (String imgType : typeArray) {
				if (fixName.trim().equalsIgnoreCase(imgType)) {
					result = true;
					break;
				}
			}
			if (!result) {
				resultMap.put("success", false);
				resultMap.put("msg", "仅支持img,jpeg,png,gif,bmp格式的图片!");
				return resultMap;
			}
			long size = file.getSize() / 1024;
			if (size > 200) {
				resultMap.put("success", false);
				resultMap.put("msg", "仅支持200K以下的图片!");
				return resultMap;
			}
			
			// 2、验证通过,可以保存到你想要的位置
			Map<String, String> map = PattenUtil.getProperties("systemConfig",
					"systemPath");

			File file2 = new File(PattenUtil.getWebRootAbsolutePath()
					+ map.get("resourceImgPath"));// 例如:/path/img/a.img

			if (!file2.exists())
				file2.mkdirs();
			long date = new Date().getTime();
			file2 = new File(PattenUtil.getWebRootAbsolutePath()
					+ map.get("resourceImgPath") +File.separator+ date+file.getOriginalFilename());// 例如:/path/img/a.img
			try {
				file.transferTo(file2);
				resultMap.put("success", true);
				resultMap.put("file_path", "/"+map.get("resourceImgPath") +File.separator+  date+file.getOriginalFilename());
			} catch (IllegalStateException | IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
				resultMap.put("success", false);
				resultMap.put("msg", "上传失败le!");
			}
			return resultMap;
		} else {
			resultMap.put("success", false);
			resultMap.put("msg", "请选择要上传的图片...");
			return resultMap;
		}
	}


注意,在serviced代码中使用了工具类

PattenUtil.getWebRootAbsolutePath()

这个类主要作用是获取应用Webroot根目录,现在贴上此部分代码,进攻参考:

	/**
	 * 获取WebRoot目录的绝对路径
	 * 
	 * @return
	 */
	public static String getWebRootAbsolutePath() {
		String path = null;
		String folderPath = PattenUtil.class.getProtectionDomain()
				.getCodeSource().getLocation().getPath();
		if (folderPath.indexOf("WEB-INF/") > 0) {
			path = folderPath.substring(0, folderPath.indexOf("WEB-INF/"));
		}
		return path;
	}

这个就决定了浏览器中上传的图片实际保存到服务器上的位置 ,代码中需要验证的参数请注意验证,防止漏洞攻击。

通过以上过程,就可以实现Simditor上传本地文件.

blob.png


分类   前端设计
字数   5003

博客标签    Simditor上传本地图片  

评论