Ueditor与FastDFS的整合

此博客承接上面两篇博客：

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。

扫描二维码关注公众号，回复： 3397494 查看本文章

下面是我自己的控制器

@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

Ueditor与FastDFS的整合

猜你喜欢