SSM项目中使用Ueditor需要提前下载Ueditor和映入pom依赖,这里就不阐述了。
本文章主要讲如何将图片保存到本地。
当配置好ueditor的时候,这个时候上传的图片是在一个临时文件夹内,当重启tomact服务器就没了,所以我们要获取到富文本编辑器上传的图片并保存到本地。
先贴前台代码:
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl') {
return '${APP_PATH}/ueditor/uploadimage';//这就是自定义的上传地址
} else if (action == 'uploadvideo') {
return '';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
注意这里return的一个是后台接口的位置
再来看后台代码:
第一步我们需要创建一个bean文件,用来处理返回的数据。
public class ReturnUploadImage{
private String state;//上传状态SUCCESS,一定要大写
private String url;//上传地址
private String title;//图片名称
private String original;//图片名称
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getOriginal() {
return original;
}
public void setOriginal(String original) {
this.original = original;
}
}
然后controller代码:
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/uploadimage")
public String uploadimage(HttpServletRequest request , HttpServletResponse response) throws Exception {
response.setContentType("text/html;charset=UTF-8");
MultipartHttpServletRequest m = (MultipartHttpServletRequest) request;
MultipartFile file = m.getFile("upfile");
String filePath = "E:\\upload\\";// 保存图片的路径
// 获取原始图片的拓展名
String originalFilename = file.getOriginalFilename();
// 新的文件名字
String newFileName = UUID.randomUUID() + originalFilename;
File targetFile = new File(filePath, newFileName);
file.transferTo(targetFile);
String savepath = "/upload/" + newFileName;
ReturnUploadImage rui = new ReturnUploadImage();
if(targetFile != null) {
rui.setState("SUCCESS");
rui.setUrl(savepath);
rui.setOriginal(newFileName);
rui.setTitle(newFileName);
}
String result = new JSONObject(rui).toString();
response.getWriter().write(result);
System.out.println(result);
return null;
}
}
我们仔细看这段代码里面savepath为一个本地的路径,要使服务器能访问到,需要进行如下步骤,右键服务器open,在右侧选择add Ex…
然后
设置好如第一张图的样子。
这样图片的访问路径就是以"/upload"为访问路径,即/upload映射到了本地的E:\upload,所以我们要保存的图片路径即为本地路径。
要注意下面这段代码,这些是需要反馈给服务器的json数据,这里使用了JSON的toString方法,即把对象转换为String,这步是必须的。
if(targetFile != null) {
rui.setState("SUCCESS");
rui.setUrl(savepath);
rui.setOriginal(newFileName);
rui.setTitle(newFileName);
}
String result = new JSONObject(rui).toString();
response.getWriter().write(result);
System.out.println(result);
使用这个方法,需要在pom中映入依赖,如下
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20170516</version>
</dependency>
ok,这个时候上传是没有任何问题,但是图片可能无法在富文本框中回显,这是因为我们在config.json中 “imageUrlPrefix”: “”, /* 图片访问路径前缀 */这一项中填入了东西,仔细研究就会发现我们设置的url是upload/…,后台返回的数据和imageUrlPrefix拼接后组成了图片的完整路径,所以我们把UrlPrefix设置为空。这样图片的url路径就是我们seturl的路径。
ok,至此,我们就搭建完了。测试一下。
网页显示如下,
我们再去看看我们的本地文件夹
当然我们也可以把图片上传到服务器的工程目录下,但是有一个很严重的问题就是,每次上传完之后,我们必须刷新项目才能够访问到图片,所以还不如上传到本地文件夹。
本次解决参考了下面链接的文章
文章
十分感谢,大家在配置中遇到什么问题,可以在下面留言!萌新一个,欢迎指教