Spring+Vue整合UEditor富文本实现图片附件上传

短命女 2021-12-12 01:45 707阅读 0赞

## 下载UEditor ##

> [https://ueditor.baidu.com/website/download.html][https_ueditor.baidu.com_website_download.html]

下载完整源码和JSP版本

\[外链图片转存失败(img-7ETvopuL-1562690226865)([http://203.195.224.74/wp-content/uploads/2019/07/aa0ec8d1b169b8ed7bf19db3c1eeeebd.png][http_203.195.224.74_wp-content_uploads_2019_07_aa0ec8d1b169b8ed7bf19db3c1eeeebd.png])\]

## Spring后端集成 ##

#### 1. 解压完整源码，拷贝jsp目录下的java源码，到spring mvc后端 ####

\[外链图片转存失败(img-lIJgYE49-1562690226866)([http://203.195.224.74/wp-content/uploads/2019/07/1cae429279def464c58960280f3a2c4e.png][http_203.195.224.74_wp-content_uploads_2019_07_1cae429279def464c58960280f3a2c4e.png])\]

> jsp目录下java源码

\[外链图片转存失败(img-InVdYZT5-1562690226867)([http://203.195.224.74/wp-content/uploads/2019/07/bdf89ee4c37485047ed2c3033a68a6f1.png][http_203.195.224.74_wp-content_uploads_2019_07_bdf89ee4c37485047ed2c3033a68a6f1.png])\]

> 集成spring mvc后端

#### 2. 配置config.json ####

*  解压JSP版本
 *  拷贝jsp目录下config.json  
    ![aHR0cDovLzIwMy4xOTUuMjI0Ljc0L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA3LzMzZWM1NzhmMmFmNTQ0ZjhkMzdjYWIwNDFiY2RhNWU4LnBuZw][]
 *  放到java项目的resource目录下，在这里是ueditorConfig.json  
    ![aHR0cDovLzIwMy4xOTUuMjI0Ljc0L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA3LzNlMDllZTc3ZTAwNTQwYTMyODFjMDhlNjMzYzI3YTA5LnBuZw][]
 *  配置config.json文件名称，这里是ueditorConfig.json  
    \[外链图片转存失败(img-hSHZGt6Z-1562690226869)([http://203.195.224.74/wp-content/uploads/2019/07/cdf7f2bb377e68e50c152b97278a931e.png][http_203.195.224.74_wp-content_uploads_2019_07_cdf7f2bb377e68e50c152b97278a931e.png])\]

#### 3. 项目常量配置文件 ####

*  新建upload.properties，也放在resouce目录下，文件内容如下：

#host地址
    host=http://localhost:8081/ssm_project
    #文件上传服务器地址（ip+端口）
    uploadHost=http://localhost:8090/
    #普通图片上传保存目录
    imagePath = fileUpload/image/
    #系统用户头像上传保存目录
    headImgPath = fileUpload/image/headImg/
    #系统用户默认头像
    sysUserDefImg = sysUser-default.jpg
    #文本文件上传保存目录
    documentPath = fileUpload/document/
    #音频文件上传保存目录
    soundPath = fileUpload/sound/
    #视频文件上传保存目录
    videoPath = fileUpload/video/
    #ueditor编辑器上传文件保存目录（包括图片、视频、音频、文本等文件）
    ueditor = fileUpload/ueditor/

*  将upload.properties添加到Spring启动配置文件application.xml中，以便后面Controller访问

<bean id="configProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean">
    	<property name="locations">
    		<list>
    			<value>classpath:config.properties</value>
    			<value>classpath:redis.properties</value>
    			<value>classpath:upload.properties</value>
    		</list>
    	</property>
    </bean>

#### 4. 编写工具类UploadUtil.java ####

package cn.lega.common.util;
    
    import com.sun.jersey.api.client.Client;
    import com.sun.jersey.api.client.WebResource;
    import org.apache.commons.io.FilenameUtils;
    import org.springframework.util.FileCopyUtils;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.UUID;
    
    public class UploadUtil { 
        /** * 上传文件 * * @param request * @param response * @param serverPath 服务器地址:(http://172.16.5.102:8090/) * @param path 文件路径（不包含服务器地址：upload/） * @return */
        public static String upload(Client client, MultipartFile file, HttpServletRequest request, HttpServletResponse response, String serverPath, String path) { 
            // 文件名称生成策略（日期时间+uuid ）
            UUID uuid = UUID.randomUUID();
            Date d = new Date();
            SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
            String formatDate = format.format(d);
            // 获取文件的扩展名
            String extension = FilenameUtils.getExtension(file.getOriginalFilename());
            // 文件名
            String fileName = formatDate + "-" + uuid + "." + extension;
            //相对路径
            String relaPath = path + fileName;
    
    // String a = serverPath + path.substring(0, path.lastIndexOf("/"));
    // File file2 = new File(a);
    // if (!file2.exists()) { 
    // boolean mkdirs = file2.mkdirs();
    // System.out.println(mkdirs);
    // }
    
            // 另一台tomcat的URL（真实路径）
            String realPath = serverPath + relaPath;
            // 设置请求路径
    // WebResource resource = client.resource(realPath);
    
            // 发送开始post get put（基于put提交）
    // try { 
    // resource.put(String.class, file.getBytes());
    // return fileName + ";" + relaPath + ";" + realPath;
    // } catch (IOException e) { 
    // e.printStackTrace();
    // return "";
    // }
    
            // 用户目录/root/fileUpload/ueditor
            String userDir = System.getProperty("user.home");
            String ueditorUploadPath = userDir + File.separator + path;
            File file2 = new File(ueditorUploadPath);
            if (!file2.exists()) { 
                file2.mkdirs();
            }
            String newFilePath = ueditorUploadPath + fileName;
    
            // 保存在本地
            File file3 = new File(newFilePath);
            try { 
                FileCopyUtils.copy(file.getBytes(), file3);
                return fileName + ";" + relaPath + ";" + realPath;
            } catch (IOException e) { 
                e.printStackTrace();
                return "";
            }
        }
    
        public static String delete(String filePath) { 
            try { 
                Client client = new Client();
                WebResource resource = client.resource(filePath);
                resource.delete();
                return "y";
            } catch (Exception e) { 
                e.printStackTrace();
                return "n";
            }
        }
    }

#### 5. 编写Controller类UeditorController.java，为前端提供上传接口 ####

package cn.lega.common.controller;
    
    import cn.lega.common.baidu.ueditor.ActionEnter;
    import cn.lega.common.util.ResponseUtils;
    import cn.lega.common.util.StrUtils;
    import cn.lega.common.util.UploadUtil;
    import cn.lega.common.web.BaseController;
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.sun.jersey.api.client.Client;
    import org.apache.commons.io.FilenameUtils;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.core.io.ClassPathResource;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.springframework.web.multipart.MultipartResolver;
    import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.*;
    import java.util.Map;
    
    /** * 用于处理关于ueditor插件相关的请求 * * @author silianpan */
    @RestController
    @CrossOrigin
    @RequestMapping("/common/ueditor")
    public class UeditorController extends BaseController { 
    
        // 后台图片保存地址
        @Value("#{configProperties['ueditor']}")
        private String ueditor;
    
        @Value("#{configProperties['uploadHost']}")
        private String uploadHost;    //项目host路径
    
        /** * ueditor文件上传（上传到外部服务器） * * @param request * @param response * @param action */
        @ResponseBody
        @RequestMapping(value = "/ueditorUpload.do", method = { RequestMethod.GET, RequestMethod.POST})
        public void editorUpload(HttpServletRequest request, HttpServletResponse response, String action) { 
            response.setContentType("application/json");
            String rootPath = request.getSession().getServletContext().getRealPath("/");
    
            try { 
                if ("config".equals(action)) {     // 如果是初始化
                    String exec = new ActionEnter(request, rootPath).exec();
                    PrintWriter writer = response.getWriter();
                    writer.write(exec);
                    writer.flush();
                    writer.close();
                } else if ("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)) {     // 如果是上传图片、视频、和其他文件
                    try { 
                        MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
                        MultipartHttpServletRequest Murequest = resolver.resolveMultipart(request);
                        Map<String, MultipartFile> files = Murequest.getFileMap();// 得到文件map对象
                        // 实例化一个jersey
                        Client client = new Client();
    
                        for (MultipartFile pic : files.values()) { 
                            JSONObject jo = new JSONObject();
                            long size = pic.getSize();    // 文件大小
                            String originalFilename = pic.getOriginalFilename();  // 原来的文件名
                            if (StrUtils.isEmpty(uploadHost) || uploadHost.equals("default")) { 
                                uploadHost = System.getProperty("user.home") + File.separator;
                            }
                            String uploadInfo = UploadUtil.upload(client, pic, request, response, uploadHost, ueditor);
                            if (!"".equals(uploadInfo)) {     // 如果上传成功
                                String[] infoList = uploadInfo.split(";");
                                jo.put("state", "SUCCESS");
                                jo.put("original", originalFilename);//原来的文件名
                                jo.put("size", size); // 文件大小
                                jo.put("title", infoList[1]); // 随意，代表的是鼠标经过图片时显示的文字
                                jo.put("type", FilenameUtils.getExtension(pic.getOriginalFilename())); // 文件后缀名
                                jo.put("url", infoList[2]);// 这里的url字段表示的是上传后的图片在图片服务器的完整地址（http://ip:端口/***/***/***.jpg）
                            } else {     // 如果上传失败
                            }
                            ResponseUtils.renderJson(response, jo.toString());
                        }
                    } catch (Exception e) { 
                        e.printStackTrace();
                    }
                }
            } catch (Exception e) { 
            }
        }
    
    // @RequestMapping(value = "/exec")
    // public void config(HttpServletRequest request, HttpServletResponse response) { 
    // // response.setContentType("application/json");
    // String rootPath = request.getSession().getServletContext().getRealPath("/");
    // response.setHeader("Content-Type" , "text/html");
    // try { 
    // String exec = new ActionEnter(request, rootPath).exec();
    // PrintWriter writer = response.getWriter();
    // writer.write(exec);
    // writer.flush();
    // writer.close();
    // } catch (IOException e) { 
    // e.printStackTrace();
    // }
    // }
    
        @RequestMapping(value = "/exec")
        @ResponseBody
        public String exec(HttpServletRequest request) throws UnsupportedEncodingException { 
            request.setCharacterEncoding("utf-8");
            String rootPath = request.getSession().getServletContext().getRealPath("/");
            return new ActionEnter(request, rootPath).exec();
        }
    
        @RequestMapping("/ueconfig")
        public void getUEConfig(HttpServletRequest request, HttpServletResponse response) { 
            org.springframework.core.io.Resource res = new ClassPathResource("ueditorConfig.json");
            InputStream is = null;
            response.setHeader("Content-Type", "text/html");
            try { 
                is = new FileInputStream(res.getFile());
                StringBuffer sb = new StringBuffer();
                byte[] b = new byte[1024];
                int length = 0;
                while (-1 != (length = is.read(b))) { 
                    sb.append(new String(b, 0, length, "utf-8"));
                }
                String result = sb.toString().replaceAll("/\\*(.|[\\r\\n])*?\\*/", "");
                JSONObject json = JSON.parseObject(result);
                PrintWriter out = response.getWriter();
                out.print(json.toString());
            } catch (IOException e) { 
                e.printStackTrace();
            } finally { 
                try { 
                    is.close();
                } catch (IOException e) { 
                    e.printStackTrace();
                }
            }
        }
    }

## Vue前端集成 ##

#### 1. 解压jsp版本，拷贝到Vue前端项目static目录中 ####

![aHR0cDovLzIwMy4xOTUuMjI0Ljc0L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA3LzI4MDlmZTVlZDQ1ODlhMjc4ZWYyMmZkNDc2MDYwNzFiLnBuZw][]

#### 2. 前端常量配置 ####

// 静态目录
    export const STATIC_PATH = process.env.NODE_ENV === 'production' ? './static/' : '/static/'
    // UEditor服务路径，对应UeditorController.java上传接口
    export const UEDITOR_SERVER = API_BASEURL + '/common/ueditor/ueditorUpload.do'

#### 3. 安装插件vue-ueditor-wrap ####

npm install vue-ueditor-wrap
    or
    yarn add vue-ueditor-wrap

#### 4. 编写组件 ####

<template>
    	<div>
    		<component
    			style="width:100%!important"
    			:is="currentViewComp"
    			transition="fade"
    			transition-mode="out-in"
    			:config="ueditorConfig"
    			v-model="formData[item.prop]"
    			:destroy="true"
    			@ready="ueReady">
    		</component>
    	</div>
    </template>
    <script>
    import VueUeditorWrap from 'vue-ueditor-wrap'
    import {  STATIC_PATH, UEDITOR_SERVER } from '@/config'
    export default { 
    data() { 
        return { 
          currentViewComp: null,
          ueditorConfig: { 
            serverUrl: UEDITOR_SERVER,
            UEDITOR_HOME_URL: STATIC_PATH + 'ueditor1_4_3_3/',
            initialContent: '',
            initialFrameHeight: 400,
            initialFrameWidth: '100%',
            autoHeightEnabled: false
          }
        }
      },
      mounted() { 
        this.currentViewComp = VueUeditorWrap
      },
      destroyed() { 
        this.currentViewComp = null
      },
      methods: { 
        ueReady(editorInstance) { 
          this.$nextTick(() => { 
            editorInstance.setContent('')
          })
        }
      }
    }
    </script>

## Tomcat文件服务 ##

配置tomcat/conf/server.xml，添加如下代码

> port=8090 文件访问服务端口  
> docBase="/home/" 文件存储目录

#### 至此，大功告成~ ####

转载请注明：[思戀 » Spring+Vue整合UEditor富文本实现图片附件上传][_ Spring_Vue_UEditor]

[https_ueditor.baidu.com_website_download.html]: https://ueditor.baidu.com/website/download.html
[http_203.195.224.74_wp-content_uploads_2019_07_aa0ec8d1b169b8ed7bf19db3c1eeeebd.png]: http://203.195.224.74/wp-content/uploads/2019/07/aa0ec8d1b169b8ed7bf19db3c1eeeebd.png
[http_203.195.224.74_wp-content_uploads_2019_07_1cae429279def464c58960280f3a2c4e.png]: http://203.195.224.74/wp-content/uploads/2019/07/1cae429279def464c58960280f3a2c4e.png
[http_203.195.224.74_wp-content_uploads_2019_07_bdf89ee4c37485047ed2c3033a68a6f1.png]: http://203.195.224.74/wp-content/uploads/2019/07/bdf89ee4c37485047ed2c3033a68a6f1.png
[aHR0cDovLzIwMy4xOTUuMjI0Ljc0L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA3LzMzZWM1NzhmMmFmNTQ0ZjhkMzdjYWIwNDFiY2RhNWU4LnBuZw]: /images/20211211/7bd019ad65b848c8974568719b1c9f50.png
[aHR0cDovLzIwMy4xOTUuMjI0Ljc0L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA3LzNlMDllZTc3ZTAwNTQwYTMyODFjMDhlNjMzYzI3YTA5LnBuZw]: /images/20211211/b1572d1608d44a6cb2dfc457d9a56c5c.png
[http_203.195.224.74_wp-content_uploads_2019_07_cdf7f2bb377e68e50c152b97278a931e.png]: http://203.195.224.74/wp-content/uploads/2019/07/cdf7f2bb377e68e50c152b97278a931e.png
[aHR0cDovLzIwMy4xOTUuMjI0Ljc0L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA3LzI4MDlmZTVlZDQ1ODlhMjc4ZWYyMmZkNDc2MDYwNzFiLnBuZw]: /images/20211211/6ffbb7466782475eaaaad740e534a01a.png
[_ Spring_Vue_UEditor]: http://203.195.224.74/index.php/2019/07/10/ueditor_spring_vue/