vue 集成 ueditor文件上传 Java后台代码实现

最新推荐文章于 2023-12-17 16:47:18 发布
最新推荐文章于 2023-12-17 16:47:18 发布
阅读量1.2k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38799009/article/details/97792633
版权

本人项目结构如下
在这里插入图片描述
以上文件源码已经进行过二次开发，源码会在文章末尾附上链接地址，下面指出需要修改的地方

config.json
在这里插入图片描述
上面是图片上传的配置，由于我没有用到图片服务器，所以把图片和文件保存到了本地电脑项目的外部，目录结构为：
在这里插入图片描述
imageUrlPrefix，需要改成你自己的ip地址，后面可以不加/image/
这一步需要SpringMvc访问下静态资源，否则到时候图片回显失败

找到spring-mvc的配置文件，加入以下代码

	<!--注意 mapping 中的值与上图ip后跟的值对应-->
	<mvc:resources mapping="/image/*" location="file:D:/upload/image/"   cache-period="3155926"/>
	<mvc:resources mapping="/file/*" location="file:D:/upload/file/"   cache-period="3155926"/>

然后在web.xml中添加以下配置

<servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring/spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

配置文件配置成功，以下是UeditorController内容

import com.baidu.ueditor.ActionEnter;
import org.apache.commons.io.IOUtils;
import org.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;


/**
 * @author zph2
 * @CrossOrigin是为了解决跨域问题
 */
@Controller
@RequestMapping("/ueditor")
@CrossOrigin
public class UeditorController {

    private static final Logger logger = LoggerFactory.getLogger(UeditorController.class);

    @RequestMapping("/exec")
    public void ueditorConfig(HttpServletRequest request, HttpServletResponse response, MultipartFile upfile) {

        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = "";
            String actionType = request.getParameter("action");
            if ("uploadimage".equals(actionType) && !upfile.isEmpty()) {
                // 做图片上传操作
                exec = uploadImage(upfile);
            }else if ("uploadfile".equals(actionType) && !upfile.isEmpty()) {
                // 做文件上传操作
                exec = uploadFile(upfile);
            } else {
                request.setCharacterEncoding("utf-8");
                exec = new ActionEnter(request, rootPath).exec();
            }
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            logger.error("UeditorController#ueditorConfig exception:", e);
        }
    }

    /**
     * 图片上传
     * @param file
     * @return
     */
    private String uploadImage(MultipartFile file) {
        JSONObject jsonResult = null;
        try {
            String fileName = file.getOriginalFilename();
            String extraName = fileName.substring(fileName.lastIndexOf("."));

            String str = UUID.randomUUID().toString();
            String url = str + ".png ";

            //得到文件的输入流
            InputStream in = new BufferedInputStream(file.getInputStream());
            //获得文件的输出流
            OutputStream out = new BufferedOutputStream(new FileOutputStream(new File("D:/upload/image/",url)));
            IOUtils.copy(in, out);
            in.close();
            out.close();


            jsonResult = new JSONObject(resultMap("SUCCESS", url, file.getSize(), fileName, fileName, extraName));

        } catch (Exception e) {
            logger.warn("UeditorController#uploadImage exception:", e);
            jsonResult = new JSONObject(resultMap("文件上传失败", "", 0, "", "", ""));
        }
        return jsonResult.toString();
    }

    /**
     * 文件上传
     * @param file
     * @return
     */
    private String uploadFile(MultipartFile file) {
        JSONObject jsonResult = null;
        try {
            String fileName = file.getOriginalFilename();
            String extraName = fileName.substring(fileName.lastIndexOf("."));
            String str = UUID.randomUUID().toString();
            String url = str + extraName;

            //得到文件的输入流
            InputStream in = new BufferedInputStream(file.getInputStream());
            //获得文件的输出流
            OutputStream out = new BufferedOutputStream(new FileOutputStream(new File("D:/upload/file/",url)));
            IOUtils.copy(in, out);
            in.close();
            out.close();


            jsonResult = new JSONObject(resultMap("SUCCESS", url, file.getSize(), fileName, fileName, extraName));

        } catch (Exception e) {
            logger.warn("UeditorController#uploadImage exception:", e);
            jsonResult = new JSONObject(resultMap("文件上传失败", "", 0, "", "", ""));
        }
        return jsonResult.toString();
    }


    //{"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 = new HashMap<>();
        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;
    }
}

以上就是图片上传的全部操作
然后前台vue中 serverUrl 写成 http://ip:端口号/ueditor/exec 即可。
上传附件与上传图片一致，下面附上config.json中的配置
在这里插入图片描述
config.json代码如下

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    "basePath":"D:/",
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 500, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://192.168.0.126:8080/image/", /* 图片访问路径前缀 */
    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

    /* 涂鸦图片上传配置项 */
    "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
    "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
    "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
    "scrawlUrlPrefix": "", /* 图片访问路径前缀 */
    "scrawlInsertAlign": "none",

    /* 截图工具上传 */
    "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
    "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
    "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

    /* 抓取远程图片配置 */
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
    "catcherFieldName": "source", /* 提交的图片列表表单名称 */
    "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "catcherUrlPrefix": "", /* 图片访问路径前缀 */
    "catcherMaxSize": 2048000, /* 上传大小限制，单位B */
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */
    /*抓取远程图片是否开启,默认true*/
	"catchRemoteImageEnable": false,

    /* 上传视频配置 */
    "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
    "videoFieldName": "upfile", /* 提交的视频表单名称 */
    "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "videoUrlPrefix": "", /* 视频访问路径前缀 */
    "videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

    /* 上传文件配置 */
    "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
    "fileFieldName": "upfile", /* 提交的文件表单名称 */
    "filePathFormat": "/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "fileUrlPrefix": "http://192.168.0.126:8080/file/", /* 文件访问路径前缀 */
    "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ], /* 上传文件格式显示 */

    /* 列出指定目录下的图片 */
    "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
    "imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */
    "imageManagerListSize": 20, /* 每次列出文件数量 */
    "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

    /* 列出指定目录下的文件 */
    "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
    "fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */
    "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
    "fileManagerListSize": 20, /* 每次列出文件数量 */
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ] /* 列出的文件类型 */

}

最后附上效果图
在这里插入图片描述
在这里插入图片描述

ueditor源码链接如下
链接：https://pan.baidu.com/s/1aj4lWjZ6uLYIUrCzEMHcqg 密码：f8ty

无聊写点BUG
关注
vue2.0集成ueditor以及图片上传，视频上传总结
12-15 1万+
一.需求背景前段时间因业务反馈现有编辑器wangEditor功能没有百度编辑器ueditor的工能全，需要在后管项目(技术栈：vue全家桶，UI框架:MUSE Element UI)中引入ueditor，以及后续版本迭代的图片上传，支持多图上传和视频上传(支持本地视频和外部视频上传)功能等：二.使用总结：1.将ueditor整个目录文件放入static目录下2.通过yarn安装依赖vue-uedit
springboot集成ueditor百度富文本编辑器及上传图片到oss服务器
pact_dr的博客
09-04 2286
1、下载ueditor编辑器 2、把下载的ueditor的文件springboot静态资源配置在resources下面 3、引入ueditor的js文件，及实例化 做完以上3点，就可以展示出来编辑器了 4、上传图片到oss服务器 1、先引入jsp/lib下的所有jar包，如果项目中已有的就不必重复添加了。 下面是UEdi...
Vue集成UEditor puls富文本编辑器
ew45218的博客
08-16 9798
Vue 集成 ueditor-puls 富文本编辑器。用的系统框架是ruoyi-vue若依前后端分离版本。
2. UEditor Java后端配置
Eden 的博客
12-17 173
假设页面在 a.com 域下，文件上传到 b.com 域下，这样要配置 imageUrlPrefix 为 “http://b.com” 才能得到正常路径。UEditor 1.4.0 版本对之前的配置方式进行了简化，具体请参见：后端请求规范，为了适应这次升级，JAVA 后台也进行了重写，跟之前的版本差别较大，升级的用户注意阅读本文档。有一些情况下仅仅靠返回路径是不能得到正常的图片链接，需要通过配置 imageUrlPrefix 给插入图片的路径添加前缀。应用程序目录不是网站根目录，需要给路径添加前缀。
vue、js前端集成ueditor编辑器，java后端上传图片
Elijah的博客
05-31 94
https://www.cnblogs.com/ocean-sky/p/7132319.html
ueditor二次开发Java源码
07-30
ueditor二次开发Java源码，支持图片或者文件上传到项目外面
ueditor服务端代码java
12-13
前段时间使用ueditor，由于我们不能使用本地文件存储资源，需要对服务端代码扩展，下载了jsp版的源码（实在是不好修改），自己改了改，现在上传上来看有没有需要的。附件是源码。
Vue2.0中集成UEditor富文本编辑器的方法
01-19
在vue的’项目中遇到了需要使用富文本编辑器的需求，在github上看了很多vue封装的editor插件，很多对图片上传和视频上传的支持并不是很好，最终还是决定使用UEditor。 这类的文章网上有很多，我进行了摸索、手写代码...
java在线预览编辑打印集成ueditor,lodop
10-27
通过JavaScript API，开发者可以轻松地将ueditor集成到Java后台系统中，实现在后端处理编辑的内容，例如保存到数据库或者进行进一步的数据处理。 LODOP，全称“Looking for Document Operation Option”，是一款...
修改百度的UEditor，实现图片上传到项目外的路径
07-24
要实现图片上传到项目外的路径，我们需要配置UEditor的服务器端URL。UEditor在上传图片时，会向服务器发送一个POST请求，携带图片文件。你需要在后端设置一个接收这些请求的接口，并将图片保存到指定的非项目路径。...
ueditor源码
01-25
ueditor源码：ueditor是百度的富文本编辑器，这是ueditor源码
ueditor 源码
08-14
ueditor源码，要是自己需要修改ueditor源码代码，java的可以将jsp中src下内容集成到自己的项目中
利用ueditor的文件上传功能上传文件到外部服务器的地址&&&&&字符统计功能重写
01-03
这几天用到了UEDITOR的文件上传功能,但是UEDITOR自带的文件上传功能只能将文件上传到项目根目录.百度搜索也没有很多相关的资料,更关键的是没有相关的源代码. 所以今天把我自己实现的这部分代码上传,希望大家共同进步!
UEditor1.1.2源码及jar包
09-12
UEditor1.1.2源码及jar包，留给有需要的人，UEditor1.1.2源码及jar包，留给有需要的人
ueditor-1.4.3.4 完整版本的源码
01-12
ueditor-1.4.3.3 完整版版本源码，关于springboot集成ueditor，可以参考我的文章：https://www.jianshu.com/p/006e65711de0
springboot整合UEditor亲测有效.zip
06-19
在SpringBoot项目中集成UEditor，可以帮助开发者轻松实现用户端的内容编辑和管理。 集成步骤通常包括以下几点： 1. **下载与引入UEditor**：首先，从官方仓库或提供的压缩包中下载UEditor。解压后，将所需的...
ueditor Java版更改上传文件路径
y670340559的博客
12-21 497
http://blog.csdn.net/littlebirdofjava/article/details/53945416 http://blog.csdn.net/yuancenyi/article/details/53327414?readlog
百度富文本编辑器Ueditor上传图片投机取巧之法——后端不用特意配置
weixin_37643386的博客
01-06 968
公司运营端需要增加一个富文本编辑器的模块，使用的是百度的ueditor，借鉴的是csdn一位大佬郑昊川先生的教程vue+ueditor，万分感谢。这个教程已经非常详细的讲述了vue结合ueditor的使用，方便参考。 此篇着重讲述富文本编辑器中的上传图片： 本身ueditor上传图片需要前后端共同配合才能完成，在后端配置了三个小时，踩了无数个雷依然无法成功上传后。这哥们儿问我前端能不能修改，就用我...
ueditor java_GitHub - sxpujs/ueditor: Baidu ueditor对应的java源码做了修改，兼容Spring MVC...
weixin_39962675的博客
02-18 56
ueditorBaidu ueditor对应的java源码做了修改，兼容Spring MVCBaidu ueditor源码地址为：https://github.com/fex-team/ueditor. 通过controller.jsp加载config.json与后端交互。这样的实现无法兼容Spring MVC。因此现在将此源代码修改一下适配Spring MVC。新建了两个类com.baidu.u...
vue-ueditor-wrap java后台配置
最新发布
01-11
根据提供的引用内容，以下是配置vue-ueditor-wrap组件的java后台配置的步骤： 1. 在后台项目中引入vue-ueditor-wrap组件的依赖包。可以通过Maven或手动下载jar包的方式引入依赖。 2. 在后台项目的配置文件中添加vue-ueditor-wrap组件的相关配置。具体配置内容可以参考vue-ueditor-wrap的官方文档或示例代码。 3. 在后台项目中创建一个Controller或接口，用于处理前端传递的富文本编辑器的数据。 4. 在Controller或接口中，根据前端传递的数据进行相应的处理，例如保存到数据库或进行其他业务逻辑操作。 5. 在前端项目中，根据后台配置的接口路径，将vue-ueditor-wrap组件与后台进行关联。可以通过配置组件的url属性或其他相关属性来实现。 6. 在前端项目中，根据需要配置vue-ueditor-wrap组件的其他属性，例如编辑器的样式、工具栏按钮等。 7. 在前端项目中，使用vue-ueditor-wrap组件进行富文本编辑器的展示和操作。可以通过v-model绑定数据，实现数据的双向绑定。 8. 在前端项目中，根据需要处理vue-ueditor-wrap组件的事件，例如保存按钮的点击事件、编辑器内容变化的事件等。 9. 运行后台和前端项目，验证vue-ueditor-wrap组件的配置是否生效，并进行相应的测试和调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值