此博客承接上面两篇博客:
1: https://blog.csdn.net/liujun03/article/details/82345163
2: https://blog.csdn.net/liujun03/article/details/82225611
本篇博客主题虽是说整合FastDFS,但是摊开来说的话,就是你用Ueditor上传图片时,你虽然修改了源码,使之不存储在项目中(见第一条链接),能存储在项目所在的服务器的其他目录下,但终究还是和项目在一个服务器中。
若是我们采用 单独的文件服务器的话,就需要将图片直接放到文件服务器中,这是Ueditor的服务器代码所不能实现的。
我们要考虑的是,图片若要存放到文件服务器中去,肯定是要通过访问我们自己写的控制器才能实现的,那么我们如何控制Ueditor上传图片的时候不访问uedittor.config.js中定义的服务器统一访问接口serverUrl,而是访问我们自己写的接口呢?
首先先确定一下config.json配置文件,采用原生的配置文件就可以,不需要做任何修改;
其实你改了也不碍事,只是后面的代码也同步修改一下。
接下来就是在实例化了Ueditor编辑器的html页面中添加一部分代码:
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
if (action == 'uploadimage') {
var url = "pictureController/uploadImage";
return url;
} else {
return this._bkGetActionUrl.call(this, action);
}
};
</script>
这里就是判断了如果action是上传图片时的uploadimage时(就是上传图片配置项中的imageActionName),就将url赋值为你自己写的控制器url。
下面是我自己的控制器
@Controller
@RequestMapping("pictureController")
public class PictureController{
private static final Logger LOGGER = LoggerFactory.getLogger(PictureController.class);
private static final String UPLOAD_URL = "http://devws.image.cn/";
@RequestMapping("/uploadImage")
@ResponseBody
public Map uploadImage(@RequestParam("upfile") MultipartFile file){
try{
String fileName = file.getOriginalFilename();
String extraName = fileName.substring(fileName.lastIndexOf("."));
String fileId = FileCopy.upload(file.getBytes(),fileName);
String url = UPLOAD_URL+fileId;
return resultMap("SUCCESS",url,file.getSize(),fileId,fileName,extraName);
}catch(Exception e){
return resultMap("文件上传失败","",0,"","","");
}
}
//{"state": "SUCCESS","original": "111.jpg","size": "124147","title": "1535961757878095151.jpg","type": ".jpg","url": "/1535961757878095151.jpg"}
private Map<String,Object> resultMap(String state,String url,long size,String title,String original,String type){
Map<String ,Object> result = Maps.newHashMap();
result.put("state",state);
result.put("original",original);
result.put("size",size);
result.put("title",title);
result.put("type",type);
result.put("url", url);
return result;
}
}
上面注释的那段json字符串就是原来Ueditor上传图片成功之后返回的字符串,所以我们按照此格式返回一个json字符串就可以了。
这里要注意下,uploadImage方法的参数用注解@RequestParam修饰了一下,注解里的值就是就是上传图片配置项中的imageFieldName.
哦,说的是整合FastDFS,但是这里面只有一句代码跟FastDFS有关:
String fileId = FileCopy.upload(file.getBytes(),fileName);
这是自己封装的工具类,返回的fileId加上文件服务器中给FastDFS配的域名直接拼接之后经过nginx解析就可以直接访问了。
注意点:
1: 你的config.json里的imageUrlPrefix最好为空,因为你控制器里返回的url会和imageUrlPrefix的值拼接
2: 你的文件上传解析器不要忘了写,CommonsMultipartResolver