富文本编辑器WangEditor,实现图片上传OSS云存储

首先，下载WangEditor插件，下载地址：https://github.com/wangfupeng1988/wangEditor/releases，下载最新的就好了，使用文档地址：

https://www.kancloud.cn/wangfupeng/wangeditor3/335782

第二步，解压文件，我们需要的只是release中的文件，将它放到我们项目中的静态文件中，然后页面中引入wangEditor.js文件。

第三步，使用。先简单介绍一下该js文件。

创建富文本:

 var E = window.wangEditor;
    var editor = new E('#editor');
    //    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
    editor.customConfig.uploadImgServer = '/wangEditor/saveImg';  //上传图片到服务器
    editor.customConfig.uploadFileName = 'myFileName';
    editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;//设置图片大小为20M
    editor.customConfig.uploadImgTimeout = 1000000; //图片上传超时限制10s
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'list',  // 列表
        'justify',  // 对齐方式
        'image',  // 插入图片
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];
    editor.create();

其中id为editor是我们要放入富文本的父元素。

默认富文本的菜单选项是所有菜单

 menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo']

我们也可以选择，自定义菜单选项(选择选项，传入我们需要的值)

editor.customConfig.menus = [];

其他自定义属性，请查看wangEditor.js中config的属性或者查看文档

注意：所有属性值定义一定要在创建之前定义。

第四步，图片上传

 editor.customConfig.uploadImgServer = '/wangEditor/saveImg';  //上传图片到服务器
 editor.customConfig.uploadFileName = 'myFileName';

定义上面两条属性，其中uploadImgServer为后台接收地址,uploadFileName为后台接受文件名字

第五步，后台接收图片并上传至OSS云存储

导入OSS包

 <dependency>
                <groupId>com.aliyun.oss</groupId>
                <artifactId>aliyun-sdk-oss</artifactId>
                <version>2.2.3</version>
            </dependency>

创建OSS实例,接收图片数据，并上传至OSS

 @RequestMapping(value = "saveImg", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject uploadImgToOSS(HttpServletRequest request, HttpServletResponse response) {
        JSONObject jsonObject=new JSONObject();
        try {
            request.setCharacterEncoding("UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        Part part = null;
        try {
            part = request.getPart("myFileName");// myFileName是文件域的name属性值
        } catch (IOException e) {
            e.printStackTrace();
        } catch (ServletException e) {
            e.printStackTrace();
        }
        // 包含原始文件名的字符串
        String fi = part.getHeader("content-disposition");
        // 提取文件拓展名
        String fileNameExtension = fi.substring(fi.indexOf("."), fi.length() - 1);
        // 生成实际存储的真实文件名
        String realName = UUID.randomUUID().toString() + fileNameExtension;
       // 图片存放的真实路径
        String realPath = "http://windyeel.oss-cn-shanghai.aliyuncs.com/wangEditor/" + realName;
        // 将文件写入指定路径下
        OSSClient client = new OSSClient(endpoint, accessId, accessKey);
        String dir = "wangEditor/";
        String ossUrl = "";
        try {
            InputStream inputStream = part.getInputStream();
            ossUrl = dir + realName;
            client.putObject("windyeel", ossUrl, inputStream);
        } catch (Exception e) {
            e.printStackTrace();
        }
        client.shutdown();
        // 返回图片的URL地址
        JSONArray jsonArray=new JSONArray();
        jsonArray.add(realPath);
        jsonObject.put("errno",0);
        jsonObject.put("data",jsonArray);
        return jsonObject;
    }

注意点：1、myFileName是刚刚设置的uploadFileName

2、endpoint是OSS地址: oss-cn-shanghai.aliyuncs.com，accessId是用户名，accessKey是密码；

3、realPath:图片真实存储路径,需要返回给前台

4、返回图片地址,json的键必须为data

第六步，前台接收到图片真实地址，这时候你就可以将地址保存到数据库中，而不用将整个图片装换成字节码存到数据库中，避免了数据库读取耗费的时间

注意：大图片上传可能会失败，需要设置上传文件大小，请查看博主其他文章。

如果觉得OK，请点个赞吧！