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

最新推荐文章于 2024-09-13 22:16:11 发布
置顶 最新推荐文章于 2024-09-13 22:16:11 发布
阅读量921 收藏
点赞数
分类专栏： Vue 富文本 文章标签： 富文本 UEditor 前端 Vue Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liupan6889/article/details/95261325
版权

下载UEditor

https://ueditor.baidu.com/website/download.html

下载完整源码和JSP版本

[外链图片转存失败(img-7ETvopuL-1562690226865)(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)]

jsp目录下java源码

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

集成spring mvc后端

2. 配置config.json
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目录中

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/" 文件存储目录

<Service name="fileUpload">
  <!--分配8089端口 -->
  <!-- <Connector port="8090" protocol="HTTP/1.1" connectionTimeout="20000" URIEncoding="GBK" redirectPort="8443" /> -->
  <Connector port="8090" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />
    <Engine name="fileUpload" defaultHost="localhost">
    <!--name为项目访问地址 此配置的访问为http://localhost:8080 appBase配置tomcat下wabapps下的路径-->
    <Host name="localhost" appBase="webapps"
      unpackWARs="true" autoDeploy="true" xmlValidation="false" xmlNamespaceAware="false">
      <!--资源地址-->
      <Context path="" docBase="/home/" debug="0" reloadable="false"/>
    </Host>
  </Engine>
 </Service>
至此，大功告成~

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

liupan6889
关注
专栏目录
vue + UEditor 上传图片(回显),上传附件 含token
qq_42221321的博客
04-20 6196
vue + UEditor 上传图片并回显 含token
关于Vue使用ueditor富文本编辑器上传图片
qq_37225650的博客
04-02 8541
1、使用的是vue-ueditor-wrap，前面操作网上都有，放到public下即可 2、ueditor上传图片会先请求服务器获取配置项，但是考虑我们的上传图片接口本身就有，后台那边也不想配合，只能自己改上传的代码 3、serverUrl就填服务器地址就行了，然后去修改UEditor ueditor.all.min.js的代码 // 服务器地址 serverUrl: "http://222.240.44.99:8891", token:getToken(), 4、我用的普通图片上传，找到相
Spring+Vue整合UEditor富文本实现图片附件上传的方法
08-25
主要介绍了Spring+Vue整合UEditor富文本实现图片附件上传的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-ueditor-wrap 常见问题解决方案
最新发布
gitblog_09426的博客
09-13 358
vue-ueditor-wrap 常见问题解决方案 vue-ueditor-wrap ????Vue + ????UEditor + v-model双向绑定???? 项目地址: https://gitcode.com/gh_mirrors/vu/v...
使用UEditor实现富文本编辑图片上传附件上传实例
12-04
1、内含两个文件：①、UEditorDemo.rar ②、UEdtior的简单使用.doc； 2、第一个文件是一个web项目，可以导入MyEclipse中直接启动看效果； 3、第二个文件时一个word文档，记录了UEditor的使用过程； 4、需要一个资源分只是为了能下载东西，往大伙儿见谅； 5、最后一点是提示：如果要把UEditor使用在struts中，要重写web.xml中所有过滤.jsp或者.*的过滤器，不然上传图片和文件会失败。
springboot整合ueditor+图片上传
namemui的博客
02-28 5207
项目地址 https://ueditor.baidu.com/website/ 下载步骤 开始整合 因为项目使用的springboot框架，而UEditor对于java后端的支持仅仅是给了一个jsp文件，因此，需要对该文件进行一下处理，修改为面向springboot的统一controller。 1、放到项目中 2、引入ueditor需要的jar包 3、创建test.htm...
Vue使用tinymce富文本编辑器组件 实现多附件上传、批量上传
m0_53789333的博客
08-28 484
由于我们移动了html文件的位置 因此也需要需改一下响应plugin.js的引入路径 见下图 （代码实现非常简单，有能力的可以阅读下代码 修改想要的其他需求）解压后可以将upfiles.html放在public目录，js文件可以放在assets文件夹中（目录名无所谓只要引入正确就可以）由于维护老项目 用的tinymce富文本编辑器，运营人员觉得单个上传附件太复杂了于是提出了 多附件上传的优化。查看文档发现 tinymce插件本身并不支持选择多附件上传，但是他会有拓展组件支持此功能。初始化配置富文本配置。
ueditor 图片上传 java_Spring+Vue整合UEditor富文本实现图片附件上传的方法
05-26
在Spring中实现UEditor图片上传可以参考以下步骤： 1. 在前端Vue代码中配置UEditor富文本编辑器，并对上传图片做出相关设置。 2. 在Spring后端代码中编写图片上传的控制器，处理前端传递的图片文件信息。 3. 在...
Spring+Vue整合UEditor：富文本图片附件上传的安全机制
"实现原理及安全机制-spring+vue整合ueditor富文本实现图片附件上传的方法" 本文主要讨论了如何在Spring和Vue.js框架下结合ueditor富文本编辑器实现图片和附件的上传功能，以及相关的安全机制。ueditor是一款常用的...
VUE + UEditor 单图片跨域上传功能的实现方法
08-28
VUE + UEditor 单图片跨域上传功能的实现方法 VUE + UEditor 单图片跨域上传功能的实现方法是前端开发中一个常见的需求， especially when working with Vue.js and UEditor. 在这篇文章中，我们将介绍如何实现 VUE...
vue中使用ueditor富文本编辑器
08-28
在Vue项目中集成ueditor富文本编辑器是一个常见的需求，特别是在构建后台管理系统时，富文本编辑器能够提供丰富的文本格式化功能。以下是如何在Vue环境中使用ueditor的详细步骤： 首先，你需要从ueditor的官方网站...
基于vue-simplemde实现图片拖拽、粘贴功能
08-27
主要介绍了基于vue-simplemde实现图片拖拽、粘贴功能,需要的朋友可以参考下
富文本(html)生成pdf
04-03
NULL 博文链接：https://daishijiazu2012-sina-com.iteye.com/blog/1482006
vue“欺骗”ueditor，实现图片上传
zhouyu629的专栏
07-29 334
一、环境介绍 @vue/cli 4.3.1 webpack 4.43.0 ueditor1.4.3.3 jsp版 二、springboot集成ueditor，实现分布式图片上传 参考我的另一篇博客，《微服务迁移记(五)：WEB层搭建(5)-集成ueditor编辑器，伪分布式图片上传》 配置完成后，有一个http://192.168.43.89:3000/ueconfig配置接口提供外网访问。 三...
ueditor 结合vue 上传图片，视频，附件到七牛云
aiwan7788的博客
08-10 2080
ueditor上传七牛经历了一个多星期，终于做的比较满意的实现了，期间踩过很多坑，就不分享这些坑了，直接说最后的成品，当然这里面还是有很多bug没有修复。具体问题大家具体分析吧。我纪录下我的结果。 首先是参考文章列表如下： 1、UEditor1.4.3版本-直接上传视频、附件、图片到七牛云存储，并且支持图片在线管理功能：[https://github.com/widuu/qiniu_ueditor...
Vue2.0整合UEditor富文本编辑器（内含跨域上传图片和回显内容）
xiaobinbin2372的博客
01-14 3756
前面写了一篇关于vue整合wangEditor富文本编辑器，今天介绍由百度开源的UEditor富文本编辑器。两者相比之下：wangEditor比较轻量，易于使用。Ueditor稍显臃肿。不过功能齐全，其中有一些配置稍微复杂一点，话不多说直接开始： 1.从ueditor官网下载自己后端语言对应的源码，我用的后端语言是Java所以下载jsp版本的。UEditor源码官网 2.将下载好的压缩包解压之后...
uEditor vue-ueditor-wrap相结合上传大视频文件会显示‘上传失败，请重试’的问题
sunny327的专栏
02-18 4136
最近在用github上的一个插件vue-editor-wrap做视频上传的功能时，总是出现上传大视频时上传不上去报错的问题。我上传了800M的视频，没有采用断点续传，直接上传的，连后台人员本机是可以上传成功的，但是在测试机加入腾讯 云之后，总是出现 “上传失败，请重试”的问题。 看netWork时，是有这个请 求，但是在上传到100%时会有一分多钟的等待，似乎是在等后端响应，之后就cancele...
Web 3D的部分技术选型和Babylon
2401_84411767的博客
04-27 296
/ 引入 Babylon.js 库。// 例如，设置网格材质。// 加载 glTF 模型。// 加载 glTF 模型。// 例如，设置网格可见性。// 获取加载的网格。// 设置网格位置和旋转。// 获取加载的网格。// 设置网格位置和旋转。// 添加网格到场景中。// 适配窗口大小变化。// 添加网格到场景中。// 适配窗口大小变化。
UEditor项目中引用及解决无法上传的问题
qq_37881606的博客
08-02 7859
试题题库、考试等项目多会用到富文本编辑器，当时对比了好多，最后看上了UEditor集成复杂公式的功能，于是莫名自信的搞了起来。公式集成没有坑，大坑在上传图片上。 下面就是 基本的引入、使用、以及上传文件报错的解决方法 一、引入 1、安装组件 npm installvue-ueditor-wrap 2、下载UEditor，官网UEditor文档，下载地址是https://github.com/fex-team/ueditor 这里有疑问： 为什么已经用npm安装了，还需要下载UEditor..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值