微信公众号开发 [03] 结合UEditor实现图文消息群发功能

最新推荐文章于 2022-12-21 22:11:00 发布
最新推荐文章于 2022-12-21 22:11:00 发布
阅读量261 收藏
点赞数
文章标签： json java 数据库
原文链接：http://www.cnblogs.com/deng-cc/p/6868234.html
版权

0、写在前面的话

如何实现微信平台后台管理中的，图文消息发送功能？

大概的过程如下：
  • 通过类似表单的形式，将文章各部分内容提交到后台，封装成一个实体类，并持久化到数据库中
  • 需要推送的时候，将不同的文章选择取出交给后台，由后台组装成规范化的数据结构，调用微信的图文消息素材上传和群发接口
  • 其中文章的主体部分，我们采用UEditor富文本编辑器

本文主要针对模拟表单的图片上传，以及结合UEditor进行图文内图片上传，进行重点说明。细节和具体代码流程就不再详细展开了。

参考链接：

1、什么是图文消息

所谓图文消息，就是我们常在订阅号中收到的如下图所示的消息类型：

1007017-20180612095924416-1937697525.jpg
 
从 微信开发者文档 - 消息管理 - 发送消息 - 群发接口和原创校验 - 上传图文消息素材 中可以看到，图文消息就是文章的集合，每条图文消息包含的文章不得超过8条。

我们从开发文档中上传图文消息素材的POST格式来看，一个文章大概包含的内容有： 
{ 
   "articles": [
		 {
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
             "author":"xxx",
			 "title":"Happy Day",
			 "content_source_url":"www.qq.com",
			 "content":"content",
			 "digest":"digest",
             "show_cover_pic":1
		 },
		 {
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
             "author":"xxx",
			 "title":"Happy Day",
			 "content_source_url":"www.qq.com",
			 "content":"content",
			 "digest":"digest",
             "show_cover_pic":0
		 }
   ]
}
22
 
1 
{
2 
   "articles": [
3 
         {
4 
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
5 
             "author":"xxx",
6 
             "title":"Happy Day",
7 
             "content_source_url":"www.qq.com",
8 
             "content":"content",
9 
             "digest":"digest",
10 
             "show_cover_pic":1
11 
         },
12 
         {
13 
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
14 
             "author":"xxx",
15 
             "title":"Happy Day",
16 
             "content_source_url":"www.qq.com",
17 
             "content":"content",
18 
             "digest":"digest",
19 
             "show_cover_pic":0
20 
         }
21 
   ]
22 
}

参数    是否必须    说明
Articles是图文消息，一个图文消息支持1到8条图文
thumb_media_id是图文消息缩略图的media_id，可以在基础支持-上传多媒体文件接口中获得
author否图文消息的作者
title是图文消息的标题
content_source_url否在图文消息页面点击“阅读原文”后的页面，受安全限制，如需跳转Appstore，可以使用itun.es或appsto.re的短链服务，并在短链后增加 #wechat_redirect 后缀。
content是图文消息页面的内容，支持HTML标签。具备微信支付权限的公众号，可以使用a标签，其他公众号不能使用
digest否图文消息的描述
show_cover_pic否是否显示封面，1为显示，0为不显示

而本篇博客要解决的，就是 如何获取上图红色部分的 thumb_media_id 和 content，后者主要也是阐述其内容中的图片上传过程。

2、群发图文消息的过程和UEditor使用

由微信的官方文档可知， 群发图文消息的过程如下：
  1. 首先，调用接口上传封面缩略图素材，获取thumb_media_id；（目标1）
  2. 然后将图文消息中需要用到的图片，使用上传图文消息内图片接口，上传成功并获得图片 URL；（目标2）
  3. 上传图文消息素材，需要用到图片时，请使用上一步获取的图片 URL；
  4. 使用对用户标签的群发，或对 OpenID 列表的群发，将图文消息群发出去，群发时微信会进行原创校验，并返回群发操作结果；
  5. 在上述过程中，如果需要，还可以预览图文消息、查询群发状态，或删除已群发的消息等。

我们的目标很明确，下面就开始按步骤进行说明。

2.1 启用UEditor

UEditor是百度的一款富文本编辑器，用它的主要目的是因为它配置比较灵活，所见即所得的友好体验。这里只会提供编辑器部分，其他诸如标题作者，需要自行在网页添加，此处不再阐述。

简单说来，最终我们是为了实现一个类似提交表单的功能， 把各部分内容最后封装到一个实体类中，而UEditor部分就是用来封装文章的content的。


UEditor的安装和工具栏设置等不是本文的讨论重点，此处请自行谷歌，或按照官方文档进行部署。网页上部署好以后（如下图中的部分3），再自行添加如标题输入，作者输入等input标签，得到效果如下：

参考链接：

1007017-20180612095925430-574127221.png
 

2.2 封面和文章内图片上传

2.2.1 上传封面缩略图永久素材

在永久图文消息中，要求缩略图也是永久素材类型，所以我们这里调用的接口是 “新增其他类型的永久素材的接口”，如下所示（这里type我们要用thumb）： 
http请求方式: POST，需使用https
https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=ACCESS_TOKEN&type=TYPE

调用示例（使用curl命令，用FORM表单方式新增一个其他类型的永久素材，curl命令的使用请自行查阅资料）
4
 
1 
http请求方式: POST，需使用https
2 
https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=ACCESS_TOKEN&type=TYPE
3 
 
          
 
          
 
           
 
            

              4 
            
 
           
 
           
调用示例（使用curl命令，用FORM表单方式新增一个其他类型的永久素材，curl命令的使用请自行查阅资料）
 
          
 
         
 
        
 
       
 
      
 
     
 
     
 
     
 
      
 
     
 
    
 
   
 
  
 
 
 
 
 
  
 
 
 
 

   参数说明： 
 
 
 
 
  
  • access_token（必需） 调用接口凭证
  • type（必需） 媒体文件类型，分别有图片（image）、语音（voice）、视频（video）和缩略图（thumb）
  • media（必需） form-data中媒体文件标识，有filename、filelength、content-type等信息
 
 
 
 
 
  
 
 
 
 

   那么问题来了，为了避免接口次数的频繁使用和浪费，我们在标题0中提到的过程是，将文章各部分内容提交到后台，封装成一个实体类，并持久化到数据库中。需要推送的时候，再取出来调用微信接口进行上传和推送（而不是编辑的时候就调用微信的接口）。 
 
 
 
 
  
 
 
 
 

   也就是说，缩略图信息，都是提前写好并整合封装在某个类中的（或者放在数据库中），这意味着我们要在推送消息的时候从内容里把需要上传的东西抽出来再去调用接口，获取返回值后再组装微信格式的图文消息发送。 
 
 
 
 
  
 
 
 
 

   而这里的接口要求使用表单的形式提交才能生效，但用这种方式，密钥信息accessToken就暴露在页面中，并且也获取不到上传成功后的媒体ID。怎么办？ 
 
 
 
 
  
 
 
 
 
 
  解决办法（ 
  参考链接 
  ）： 
  先把文件上传到服务器（数据库），从服务器获取文件，然后用HttpURLConnection同下面微信调用接口的url建立连接 
  ： 
 
 
 
 
 
 
  
public static String uploadTemp(File file, String url) throws IOException {
    String REQUEST_METHOD = "POST";
    String result = null;

    //请求地址
    URL urlObj = new URL(url);

    //连接
    HttpURLConnection connection = (HttpURLConnection) urlObj.openConnection();

    //设置关键值
    //POST提交表单，默认是GET
    connection.setRequestMethod(REQUEST_METHOD);
    connection.setDoInput(true);
    connection.setDoOutput(true);
    //POST方式无法使用缓存
    connection.setUseCaches(false);

    //设置请求头信息
    connection.setRequestProperty("Connection", "Keep-Alive");
    connection.setRequestProperty("Charset", "UTF-8");

    //设置边界
    String BOUNDARY = "----------" + System.currentTimeMillis();
    connection.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);

    //请求正文信息
    //part1 开头
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.append("--"); // 必须多两道线
    stringBuilder.append(BOUNDARY);
    stringBuilder.append("\r\n");
    stringBuilder.append("Content-Disposition: form-data;name=\"file\";filename=\"" + file.getName() + "\"\r\n");
    stringBuilder.append("Content-Type:application/octet-stream\r\n\r\n");

    byte[] head = stringBuilder.toString().getBytes("utf-8");

    //获得输出流
    OutputStream out = new DataOutputStream(connection.getOutputStream());
    //输出表头
    out.write(head);

    //part2 文件正文
    //把文件以流文件的方式，推入到url中
    DataInputStream in = new DataInputStream(new FileInputStream(file));
    int bytes = 0;
    byte[] bufferOut = new byte[1024];
    while ((bytes = in.read(bufferOut)) != -1) {
        out.write(bufferOut, 0, bytes);
    }
    in.close();

    //part3 结尾部分
    byte[] foot = ("\r\n--" + BOUNDARY + "--\r\n").getBytes("utf-8");// 定义最后数据分隔线
    out.write(foot);


    out.flush();
    out.close();


    StringBuffer buffer = new StringBuffer();
    BufferedReader reader = null;
    try {
        // 定义BufferedReader输入流来读取URL的响应
        reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
        String line = null;
        while ((line = reader.readLine()) != null) {
            buffer.append(line);
        }
        if (result == null) {
            result = buffer.toString();
        }
    } catch (IOException e) {
        log.error("发送POST请求出现异常！" + e);
        e.printStackTrace();
        throw new IOException("数据读取异常");
    } finally {
        if(reader!=null) {
            reader.close();
        }
    }

    return result;
}
 
  
 
   
 
    
 
    
 
    
 
    
 
     
 
      
 
       
 
        
 
         
 
          
 
           

             85 
           
 
          
 
         
 
         
 
         
 
         
 
          

              
          
 
         
 
         
 
          
 
           
 
           
 
           
 
            

              1 
            
 
           
 
           
public static String uploadTemp(File file, String url) throws IOException {
 
          
 
          
 
           
 
            

              2 
            
 
           
 
           
    String REQUEST_METHOD = "POST";
 
          
 
          
 
           
 
            

              3 
            
 
           
 
           
    String result = null;
 
          
 
          
 
           
 
            

              4 
            
 
           
 
           
 
          
 
          
 
           
 
            

              5 
            
 
           
 
           
    //请求地址
 
          
 
          
 
           
 
            

              6 
            
 
           
 
           
    URL urlObj = new URL(url);
 
          
 
          
 
           
 
            

              7 
            
 
           
 
           
 
          
 
          
 
           
 
            

              8 
            
 
           
 
           
    //连接
 
          
 
          
 
           
 
            

              9 
            
 
           
 
           
    HttpURLConnection connection = (HttpURLConnection) urlObj.openConnection();
 
          
 
          
 
           
 
            

              10 
            
 
           
 
           
 
          
 
          
 
           
 
            

              11 
            
 
           
 
           
    //设置关键值
 
          
 
          
 
           
 
            

              12 
            
 
           
 
           
    //POST提交表单，默认是GET
 
          
 
          
 
           
 
            

              13 
            
 
           
 
           
    connection.setRequestMethod(REQUEST_METHOD);
 
          
 
          
 
           
 
            

              14 
            
 
           
 
           
    connection.setDoInput(true);
 
          
 
          
 
           
 
            

              15 
            
 
           
 
           
    connection.setDoOutput(true);
 
          
 
          
 
           
 
            

              16 
            
 
           
 
           
    //POST方式无法使用缓存
 
          
 
          
 
           
 
            

              17 
            
 
           
 
           
    connection.setUseCaches(false);
 
          
 
          
 
           
 
            

              18 
            
 
           
 
           
 
          
 
          
 
           
 
            

              19 
            
 
           
 
           
    //设置请求头信息
 
          
 
          
 
           
 
            

              20 
            
 
           
 
           
    connection.setRequestProperty("Connection", "Keep-Alive");
 
          
 
          
 
           
 
            

              21 
            
 
           
 
           
    connection.setRequestProperty("Charset", "UTF-8");
 
          
 
          
 
           
 
            

              22 
            
 
           
 
           
 
          
 
          
 
           
 
            

              23 
            
 
           
 
           
    //设置边界
 
          
 
          
 
           
 
            

              24 
            
 
           
 
           
    String BOUNDARY = "----------" + System.currentTimeMillis();
 
          
 
          
 
           
 
            

              25 
            
 
           
 
           
    connection.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);
 
          
 
          
 
           
 
            

              26 
            
 
           
 
           
 
          
 
          
 
           
 
            

              27 
            
 
           
 
           
    //请求正文信息
 
          
 
          
 
           
 
            

              28 
            
 
           
 
           
    //part1 开头
 
          
 
          
 
           
 
            

              29 
            
 
           
 
           
    StringBuilder stringBuilder = new StringBuilder();
 
          
 
          
 
           
 
            

              30 
            
 
           
 
           
    stringBuilder.append("--"); // 必须多两道线
 
          
 
          
 
           
 
            

              31 
            
 
           
 
           
    stringBuilder.append(BOUNDARY);
 
          
 
          
 
           
 
            

              32 
            
 
           
 
           
    stringBuilder.append("\r\n");
 
          
 
          
 
           
 
            

              33 
            
 
           
 
           
    stringBuilder.append("Content-Disposition: form-data;name=\"file\";filename=\"" + file.getName() + "\"\r\n");
 
          
 
          
 
           
 
            

              34 
            
 
           
 
           
    stringBuilder.append("Content-Type:application/octet-stream\r\n\r\n");
 
          
 
          
 
           
 
            

              35 
            
 
           
 
           
 
          
 
          
 
           
 
            

              36 
            
 
           
 
           
    byte[] head = stringBuilder.toString().getBytes("utf-8");
 
          
 
          
 
           
 
            

              37 
            
 
           
 
           
 
          
 
          
 
           
 
            

              38 
            
 
           
 
           
    //获得输出流
 
          
 
          
 
           
 
            

              39 
            
 
           
 
           
    OutputStream out = new DataOutputStream(connection.getOutputStream());
 
          
 
          
 
           
 
            

              40 
            
 
           
 
           
    //输出表头
 
          
 
          
 
           
 
            

              41 
            
 
           
 
           
    out.write(head);
 
          
 
          
 
           
 
            

              42 
            
 
           
 
           
 
          
 
          
 
           
 
            

              43 
            
 
           
 
           
    //part2 文件正文
 
          
 
          
 
           
 
            

              44 
            
 
           
 
           
    //把文件以流文件的方式，推入到url中
 
          
 
          
 
           
 
            

              45 
            
 
           
 
           
    DataInputStream in = new DataInputStream(new FileInputStream(file));
 
          
 
          
 
           
 
            

              46 
            
 
           
 
           
    int bytes = 0;
 
          
 
          
 
           
 
            

              47 
            
 
           
 
           
    byte[] bufferOut = new byte[1024];
 
          
 
          
 
           
 
            

              48 
            
 
           
 
           
    while ((bytes = in.read(bufferOut)) != -1) {
 
          
 
          
 
           
 
            

              49 
            
 
           
 
           
        out.write(bufferOut, 0, bytes);
 
          
 
          
 
           
 
            

              50 
            
 
           
 
           
    }
 
          
 
          
 
           
 
            

              51 
            
 
           
 
           
    in.close();
 
          
 
          
 
           
 
            

              52 
            
 
           
 
           
 
          
 
          
 
           
 
            

              53 
            
 
           
 
           
    //part3 结尾部分
 
          
 
          
 
           
 
            

              54 
            
 
           
 
           
    byte[] foot = ("\r\n--" + BOUNDARY + "--\r\n").getBytes("utf-8");// 定义最后数据分隔线
 
          
 
          
 
           
 
            

              55 
            
 
           
 
           
    out.write(foot);
 
          
 
          
 
           
 
            

              56 
            
 
           
 
           
 
          
 
          
 
           
 
            

              57 
            
 
           
 
           
 
          
 
          
 
           
 
            

              58 
            
 
           
 
           
    out.flush();
 
          
 
          
 
           
 
            

              59 
            
 
           
 
           
    out.close();
 
          
 
          
 
           
 
            

              60 
            
 
           
 
           
 
          
 
          
 
           
 
            

              61 
            
 
           
 
           
 
          
 
          
 
           
 
            

              62 
            
 
           
 
           
    StringBuffer buffer = new StringBuffer();
 
          
 
          
 
           
 
            

              63 
            
 
           
 
           
    BufferedReader reader = null;
 
          
 
          
 
           
 
            

              64 
            
 
           
 
           
    try {
 
          
 
          
 
           
 
            

              65 
            
 
           
 
           
        // 定义BufferedReader输入流来读取URL的响应
 
          
 
          
 
           
 
            

              66 
            
 
           
 
           
        reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
 
          
 
          
 
           
 
            

              67 
            
 
           
 
           
        String line = null;
 
          
 
          
 
           
 
            

              68 
            
 
           
 
           
        while ((line = reader.readLine()) != null) {
 
          
 
          
 
           
 
            

              69 
            
 
           
 
           
            buffer.append(line);
 
          
 
          
 
           
 
            

              70 
            
 
           
 
           
        }
 
          
 
          
 
           
 
            

              71 
            
 
           
 
           
        if (result == null) {
 
          
 
          
 
           
 
            

              72 
            
 
           
 
           
            result = buffer.toString();
 
          
 
          
 
           
 
            

              73 
            
 
           
 
           
        }
 
          
 
          
 
           
 
            

              74 
            
 
           
 
           
    } catch (IOException e) {
 
          
 
          
 
           
 
            

              75 
            
 
           
 
           
        log.error("发送POST请求出现异常！" + e);
 
          
 
          
 
           
 
            

              76 
            
 
           
 
           
        e.printStackTrace();
 
          
 
          
 
           
 
            

              77 
            
 
           
 
           
        throw new IOException("数据读取异常");
 
          
 
          
 
           
 
            

              78 
            
 
           
 
           
    } finally {
 
          
 
          
 
           
 
            

              79 
            
 
           
 
           
        if(reader!=null) {
 
          
 
          
 
           
 
            

              80 
            
 
           
 
           
            reader.close();
 
          
 
          
 
           
 
            

              81 
            
 
           
 
           
        }
 
          
 
          
 
           
 
            

              82 
            
 
           
 
           
    }
 
          
 
          
 
           
 
            

              83 
            
 
           
 
           
 
          
 
          
 
           
 
            

              84 
            
 
           
 
           
    return result;
 
          
 
          
 
           
 
            

              85 
            
 
           
 
           
}
 
          
 
         
 
        
 
       
 
      
 
     
 
     
 
     
 
      
 
     
 
    
 
   
 
  
 
 
 
 
 
  
 
 
 
 

   最终返回的result字符串，是一个JSON格式的微信服务器返回的值，其中我们可以提取其中的media_id。 
  
 
 
 
 
 
  
 
 
 
 
2.2.2 结合UEditor实现图文内图片消息的图片上传
 
 

   上传图文消息内的图片，有专门的接口，这个接口上传的图片是不占用永久素材的数量限制的。调用该接口，可以获得图片的URL，这里的调用方式，也是和如上一样使用表单模拟提交的方式，这里主要讲解的是，如何结合UEditor。 
 
 
 
 
  
 
 
 
 

   UEditor编辑器中的图片上传，我们需要修改其上传后的地址，也就是说希望它把图片以流的形式给我们自己写的Action，再由我们的Action把文件提交给微信服务器以获取URL，再放到文章中去。 
 
 
 
 
  
 
 
 
 

   首先，更改编辑器的上传图片的后台地址，重写其js脚本部分的getActionUrl方法，定义跳转到自己的Action： 
 
 
 
 
 
 
  
ue = UE.getEditor("editor");
//重写UEDITOR的getActionUrl 方法,定义自己的Action,上传图片保存至相应的位置
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
    if (action == 'uploadimage' || action == 'uploadfile') {
        var id = $('#carInfoId').val();
        //修改定义自己的Action
        return '/admin/news/do/ueditor_uploadNewsImage.q';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
};
 
  
 
   
 
    
 
    
 
    
 
    
 
     
 
      
 
       
 
        
 
         
 
          
 
           

             12 
           
 
          
 
         
 
         
 
         
 
         
 
          

              
          
 
         
 
         
 
          
 
           
 
           
 
           
 
            

              1 
            
 
           
 
           
ue = UE.getEditor("editor");
 
          
 
          
 
           
 
            

              2 
            
 
           
 
           
//重写UEDITOR的getActionUrl 方法,定义自己的Action,上传图片保存至相应的位置
 
          
 
          
 
           
 
            

              3 
            
 
           
 
           
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
 
          
 
          
 
           
 
            

              4 
            
 
           
 
           
UE.Editor.prototype.getActionUrl = function (action) {
 
          
 
          
 
           
 
            

              5 
            
 
           
 
           
    if (action == 'uploadimage' || action == 'uploadfile') {
 
          
 
          
 
           
 
            

              6 
            
 
           
 
           
        var id = $('#carInfoId').val();
 
          
 
          
 
           
 
            

              7 
            
 
           
 
           
        //修改定义自己的Action
 
          
 
          
 
           
 
            

              8 
            
 
           
 
           
        return '/admin/news/do/ueditor_uploadNewsImage.q';
 
          
 
          
 
           
 
            

              9 
            
 
           
 
           
    } else {
 
          
 
          
 
           
 
            

              10 
            
 
           
 
           
        return this._bkGetActionUrl.call(this, action);
 
          
 
          
 
           
 
            

              11 
            
 
           
 
           
    }
 
          
 
          
 
           
 
            

              12 
            
 
           
 
           
};
 
          
 
         
 
        
 
       
 
      
 
     
 
     
 
     
 
      
 
     
 
    
 
   
 
  
 
 
 
 
 
  
 
 
 
 

   由于提交过来的是tmp格式，直接调用微信接口会出现类型错误的返回值，所以在Action中我们要将图片格式转换一下再调用微信接口： 
 
 
 
 
  
 
 
 
 

   参考链接： 
 
 
  
 
 
  
 
 
 
 
 
 
 
  
/**
 * ueditor编辑器上传图片到微信服务器
 * <p>该部分是使用了百度的富文本web编辑器UEditor，以及微信的图文消息内图片上传接口</p>
 *
 * @throws IOException
 */
public void ueditor_uploadNewsImage() throws IOException {
    WeChatUtil weChatUtil = new WeChatUtil();
    String accessToken = weChatUtil.getAccessToken();
    HttpServletResponse response = ServletActionContext.getResponse();

    //struts请求 包装过滤器
    MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) ServletActionContext.getRequest();
    //获取文件过滤器
    File tmp = wrapper.getFiles("upfile")[0];
    //获得上传的文件名
    String filename = wrapper.getFileNames("upfile")[0];

    int suffixIndex = filename.indexOf(".");
    //文件后缀确定
    if (suffixIndex == filename.lastIndexOf(".")) {
        String suffix = filename.substring(suffixIndex);
        File file = File.createTempFile("tmp", suffix);
        FileCopyUtils.copy(tmp, file);

        String imageUrl = weChatUtil.uploadImg(accessToken, file); //这里最终还是调用的表单模拟的那个方法
        //如果获取到了有效的imageUrl
        if (imageUrl != null && imageUrl.substring(0, 4).equals("http")) {
            String json = "{\"state\":\"SUCCESS\", \"url\":\"%s\", \"title\":\"%s\", \"original\":\"%s\"}";
            json = String.format(json, imageUrl, filename, filename);
            log.debug("上传图片返回信息：" + json);
            response.getWriter().write(json);
        }
    }
}
 
  
 
   
 
    
 
    
 
    
 
    
 
     
 
      
 
       
 
        
 
         
 
          x 
         
 
         
 
         
 
         
 
          

              
          
 
         
 
         
 
          
 
           
 
           
 
           
 
            

              1 
            
 
           
 
           
/**
 
          
 
          
 
           
 
            

              2 
            
 
           
 
           
 * ueditor编辑器上传图片到微信服务器
 
          
 
          
 
           
 
            

              3 
            
 
           
 
           
 * <p>该部分是使用了百度的富文本web编辑器UEditor，以及微信的图文消息内图片上传接口</p>
 
          
 
          
 
           
 
            

              4 
            
 
           
 
           
 *
 
          
 
          
 
           
 
            

              5 
            
 
           
 
           
 * @throws IOException
 
          
 
          
 
           
 
            

              6 
            
 
           
 
           
 */
 
          
 
          
 
           
 
            

              7 
            
 
           
 
           
public void ueditor_uploadNewsImage() throws IOException {
 
          
 
          
 
           
 
            

              8 
            
 
           
 
           
    WeChatUtil weChatUtil = new WeChatUtil();
 
          
 
          
 
           
 
            

              9 
            
 
           
 
           
    String accessToken = weChatUtil.getAccessToken();
 
          
 
          
 
           
 
            

              10 
            
 
           
 
           
    HttpServletResponse response = ServletActionContext.getResponse();
 
          
 
          
 
           
 
            

              11 
            
 
           
 
           
 
          
 
          
 
           
 
            

              12 
            
 
           
 
           
    //struts请求 包装过滤器
 
          
 
          
 
           
 
            

              13 
            
 
           
 
           
    MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) ServletActionContext.getRequest();
 
          
 
          
 
           
 
            

              14 
            
 
           
 
           
    //获取文件过滤器
 
          
 
          
 
           
 
            

              15 
            
 
           
 
           
    File tmp = wrapper.getFiles("upfile")[0];
 
          
 
          
 
           
 
            

              16 
            
 
           
 
           
    //获得上传的文件名
 
          
 
          
 
           
 
            

              17 
            
 
           
 
           
    String filename = wrapper.getFileNames("upfile")[0];
 
          
 
          
 
           
 
            

              18 
            
 
           
 
           
 
          
 
          
 
           
 
            

              19 
            
 
           
 
           
    int suffixIndex = filename.indexOf(".");
 
          
 
          
 
           
 
            

              20 
            
 
           
 
           
    //文件后缀确定
 
          
 
          
 
           
 
            

              21 
            
 
           
 
           
    if (suffixIndex == filename.lastIndexOf(".")) {
 
          
 
          
 
           
 
            

              22 
            
 
           
 
           
        String suffix = filename.substring(suffixIndex);
 
          
 
          
 
           
 
            

              23 
            
 
           
 
           
        File file = File.createTempFile("tmp", suffix);
 
          
 
          
 
           
 
            

              24 
            
 
           
 
           
        FileCopyUtils.copy(tmp, file);
 
          
 
          
 
           
 
            

              25 
            
 
           
 
           
 
          
 
          
 
           
 
            

              26 
            
 
           
 
           
        String imageUrl = weChatUtil.uploadImg(accessToken, file); //这里最终还是调用的表单模拟的那个方法
 
          
 
          
 
           
 
            

              27 
            
 
           
 
           
        //如果获取到了有效的imageUrl
 
          
 
          
 
           
 
            

              28 
            
 
           
 
           
        if (imageUrl != null && imageUrl.substring(0, 4).equals("http")) {
 
          
 
          
 
           
 
            

              29 
            
 
           
 
           
            String json = "{\"state\":\"SUCCESS\", \"url\":\"%s\", \"title\":\"%s\", \"original\":\"%s\"}";
 
          
 
          
 
           
 
            

              30 
            
 
           
 
           
            json = String.format(json, imageUrl, filename, filename);
 
          
 
          
 
           
 
            

              31 
            
 
           
 
           
            log.debug("上传图片返回信息：" + json);
 
          
 
          
 
           
 
            

              32 
            
 
           
 
           
            response.getWriter().write(json);
 
          
 
          
 
           
 
            

              33 
            
 
           
 
           
        }
 
          
 
          
 
           
 
            

              34 
            
 
           
 
           
    }
 
          
 
          
 
           
 
            

              35 
            
 
           
 
           
}
 
          
 
         
 
        
 
       
 
      
 
     
 
     
 
     
 
      
 
     
 
    
 
   
 
  
 
 
 
 
 
  
 
 
 
 

   另外，需要注意的是，UEditor要求 
  后端返回固定格式的返回码才能实现图片插入到文本编辑内容中。注意这里的json返回码格式，内部必须使用双引号，使用单引号替代是无效的。 
 
 
 
 
  
 
 
 
 

   上面两个就是该部分的核心内容，还有一个小地方需要修改，如果使用的Struts框架，那么要注意，由于Struts2框架默认使用Apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现文件上传，将request中的文件域封装到action中的一个File类型的属性中，并删除request中的原有文件域，因此直接用Ueditor上传文件会失败。 
 
 
 
 
  
 
 
 
 

   解决的方法是自己写一个Filter替代Struts2的Filter，排除掉ueditor的controller.jsp文件。 
  
 
 
 
 
 
  
 
 
 
 

   参考链接： 
 
 
  
 
 
  
 
 
 
 
 
 
 
  
public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter {
    public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        //不过滤的url
        String url = request.getRequestURI();
        System.out.println(url);
        try {
            if (url.contains("/controller.jsp")) {
                System.out.println("使用自定义的过滤器");
                chain.doFilter(req, res);
            } else {
                System.out.println("使用默认的过滤器");
                super.doFilter(req, res, chain);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
 
  
 
   
 
    
 
    
 
    
 
    
 
     
 
      
 
       
 
        
 
         
 
          
 
           

             19 
           
 
          
 
         
 
         
 
         
 
         
 
          

              
          
 
         
 
         
 
          
 
           
 
           
 
           
 
            

              1 
            
 
           
 
           
public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter {
 
          
 
          
 
           
 
            

              2 
            
 
           
 
           
    public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {
 
          
 
          
 
           
 
            

              3 
            
 
           
 
           
        HttpServletRequest request = (HttpServletRequest) req;
 
          
 
          
 
           
 
            

              4 
            
 
           
 
           
        //不过滤的url
 
          
 
          
 
           
 
            

              5 
            
 
           
 
           
        String url = request.getRequestURI();
 
          
 
          
 
           
 
            

              6 
            
 
           
 
           
        System.out.println(url);
 
          
 
          
 
           
 
            

              7 
            
 
           
 
           
        try {
 
          
 
          
 
           
 
            

              8 
            
 
           
 
           
            if (url.contains("/controller.jsp")) {
 
          
 
          
 
           
 
            

              9 
            
 
           
 
           
                System.out.println("使用自定义的过滤器");
 
          
 
          
 
           
 
            

              10 
            
 
           
 
           
                chain.doFilter(req, res);
 
          
 
          
 
           
 
            

              11 
            
 
           
 
           
            } else {
 
          
 
          
 
           
 
            

              12 
            
 
           
 
           
                System.out.println("使用默认的过滤器");
 
          
 
          
 
           
 
            

              13 
            
 
           
 
           
                super.doFilter(req, res, chain);
 
          
 
          
 
           
 
            

              14 
            
 
           
 
           
            }
 
          
 
          
 
           
 
            

              15 
            
 
           
 
           
        } catch (Exception e) {
 
          
 
          
 
           
 
            

              16 
            
 
           
 
           
            e.printStackTrace();
 
          
 
          
 
           
 
            

              17 
            
 
           
 
           
        }
 
          
 
          
 
           
 
            

              18 
            
 
           
 
           
    }
 
          
 
          
 
           
 
            

              19 
            
 
           
 
           
}
 
          
 
         
 
        
 
       
 
      
 
     
 
     
 
     
 
      
 
     
 
    
 
   
 
  
 
 
 
 
 
  
 
 
 
 
2.3 图文素材上传和发送
 
 

   到这里，我们再来看下上传图文永久素材所需要的格式： 
 
 
 
 
 
 
  
{
   "articles": [
		 {
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
             "author":"xxx",
			 "title":"Happy Day",
			 "content_source_url":"www.qq.com",
			 "content":"content",
			 "digest":"digest",
             "show_cover_pic":1
		 },
		 {
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
             "author":"xxx",
			 "title":"Happy Day",
			 "content_source_url":"www.qq.com",
			 "content":"content",
			 "digest":"digest",
             "show_cover_pic":0
		 }
   ]
}
 
  
 
   
 
    
 
    
 
    
 
    
 
     
 
      
 
       
 
        
 
         
 
         
 
         
 
         
 
          

              
          
 
         
 
         
 
          
 
           
 
           
 
           
 
            

              1 
            
 
           
 
           
{
 
          
 
          
 
           
 
            

              2 
            
 
           
 
           
   "articles": [
 
          
 
          
 
           
 
            

              3 
            
 
           
 
           
         {
 
          
 
          
 
           
 
            

              4 
            
 
           
 
           
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
 
          
 
          
 
           
 
            

              5 
            
 
           
 
           
             "author":"xxx",
 
          
 
          
 
           
 
            

              6 
            
 
           
 
           
             "title":"Happy Day",
 
          
 
          
 
           
 
            

              7 
            
 
           
 
           
             "content_source_url":"www.qq.com",
 
          
 
          
 
           
 
            

              8 
            
 
           
 
           
             "content":"content",
 
          
 
          
 
           
 
            

              9 
            
 
           
 
           
             "digest":"digest",
 
          
 
          
 
           
 
            

              10 
            
 
           
 
           
             "show_cover_pic":1
 
          
 
          
 
           
 
            

              11 
            
 
           
 
           
         },
 
          
 
          
 
           
 
            

              12 
            
 
           
 
           
         {
 
          
 
          
 
           
 
            

              13 
            
 
           
 
           
             "thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p",
 
          
 
          
 
           
 
            

              14 
            
 
           
 
           
             "author":"xxx",
 
          
 
          
 
           
 
            

              15 
            
 
           
 
           
             "title":"Happy Day",
 
          
 
          
 
           
 
            

              16 
            
 
           
 
           
             "content_source_url":"www.qq.com",
 
          
 
          
 
           
 
            

              17 
            
 
           
 
           
             "content":"content",
 
          
 
          
 
           
 
            

              18 
            
 
           
 
           
             "digest":"digest",
 
          
 
          
 
           
 
            

              19 
            
 
           
 
           
             "show_cover_pic":0
 
          
 
          
 
           
 
            

              20 
            
 
           
 
           
         }
 
          
 
          
 
           
 
            

              21 
            
 
           
 
           
   ]
 
          
 
          
 
           
 
            

              22 
            
 
           
 
           
}
 
          
 
         
 
        
 
       
 
      
 
     
 
     
 
     
 
      
 
     
 
    
 
   
 
  
 
 
 
 
 
  
  • thumb_media_id 上传封面缩略图后返回的media_id，我们已经说明了
  • author 这个写个input就可以搞定
  • title 同上
  • content_source_url 非必需
  • content 这里就是我们用UEditor编辑器中的内容了，其中重点是图片上传，我们已经说明了
  • digest 摘要，加input解决
  • show_cover_pic 非必需
 
 
 
 
 
  
 
 
 
 

   东西都有了，调用接口也就简单了。 
  然后接着调用群发的接口，也就很容易了。这里主要参考文档（微信公众平台技术文档 - 消息管理 - 发送消息 - 群发接口和原创校验）就行了，时间精力有限，就不再展开了。 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
 
 
 
 
  
 
  
 
  
 
  
 
  
 
 
 
 
 
  
 
  
 
  
 
  
 
  
 
 
 

 

转载于:https://www.cnblogs.com/deng-cc/p/6868234.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30807677
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
百度UEditor添加视频 增加支持“通用代码”功能，支持微信

				
			

			

				

					weixin_30549657的博客
				

				

					03-09
					
					410
					
				

			

		

		

			
				
今天发现用UEditor默认的添加视频，在微信内置浏览器里无法正常显示。估计是微信屏蔽了UEditor使用的<embeded>标签。插入iframe形式的通用代码则能正常显示。
用百度UEditor可以插入iframe，流程如下：
1.找到视频的“通用代码”，比如腾讯的




2.在通用代码里找到src="xxxxxxxxxxxxx"，把这个双引号里面的内容复制下来
...

			
		

	



                

              
                



	

		

			

				
					
【微信公众平台开发】公布动态新闻好帮手UEditor富文本

				
			

			

				

					weixin_34270865的博客
				

				

					12-28
					
					258
					
				

			

		

		

			
				


因为微信要做公布动态新闻。那就须要富文本。上网搜索有非常多这样的插件，比方CKEditor。KindEditor等；最后看到百度一款开源的UEditor。官网打开，风格设计就吸引住了自己。所以就选UEditor了。


第一步：下载源代码：因为是用php开发。所下面载版本号是php版的，为了兼容曾经的IE版本号，选择版本号1.4.2。UEditor


第二步：把下载下来的ue...

			
		

	



                


  
              

                


	

		

			

				
					
微信公众号群发接口和原创校验

				
			

			

				

					一朵翔云的博客
				

				

					03-26
					
					1万+
					
				

			

		

		

			
				


一、说明
1.1限制：


二、群发图文消息
三、群发图片、文本
四、群发时使用is_to_all
五、上传图文消息接口
5.1 上传图文消息内的图片获取URL【订阅号与服务号认证后均可用】
5.2 上传图文消息素材【订阅号与服务号认证后均可用】


六、原创校验
6.1 群发接口新增原创校验流程
6.2 群发接口的 send_ignore_reprint 参数


七、开始群发
7.1 根据...

			
		

	





	

		

			

				
					
微信公众平台使用的富文本编辑器(ueditor)

				
			

			

				

					weixin_33744141的博客
				

				

					06-10
					
					7040
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	



		

			
		



	

		

			

				
					
微信开发群发多图文消息-微信开发16(PHP)

				
			

			

				

					05-19
				

			

		

		

			
				
会员免费看，http://edu.csdn.net/lecturer/842 右侧可办理会员卡。微信群发多图文消息开发是子恒老师《子恒说微信开发》视频教程的第16部。详细讲解了用php开发微信群发图文消息。内容包含图文消息前端页面，一个页面插入多个百度UEditor，群发多图文，查询和删除图文消息等等。欢迎反馈，微信号：QQ68183131

			
		

	





	

		

			

				
					
elementUI+froalaEditor实现仿微信公众号文章富文本编辑器

				
			

			

				

					06-30
				

			

		

		

			
				
使用elementUI框架和froalaEditor编辑器，实现仿微信公众平台中公众号文章编辑功能，主要包括左侧文章列表和右侧内容编辑，使用时需要安装vue-froala-wysiwyg、jquery和font-awesome，安装方法见...

			
		

	





	

		

			

				
					
基于Vue实现微信小程序的图文编辑器

				
			

			

				

					01-03
				

			

		

		

			
				
由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的，所以用vue写了个针对小程序用的图文编辑器。效果如下  多图上传图片用到了 ajaxfileupload.js （不知道哪位仁兄写的，拿来用了，...

			
		

	





	

		

			

				
					
VUE + UEditor 单图片跨域上传功能的实现方法

				
			

			

				

					08-28
				

			

		

		

			
				
VUE + UEditor 单图片跨域上传功能的实现方法是前端开发中一个常见的需求， especially when working with Vue.js and UEditor. 在这篇文章中，我们将介绍如何实现 VUE + UEditor 单图片跨域上传功能，包括前端和...

			
		

	





	

		

			

				
					
Vue.js结合Ueditor富文本编辑器的实例代码

				
			

			

				

					10-19
				

			

		

		

			
				
Vue.js与Ueditor整合是将流行的前端框架Vue与Ueditor富文本编辑器相结合，以便在Vue项目中方便地实现文本编辑功能。以下是如何在Vue.js项目中集成Ueditor的详细步骤和关键知识点：  1. **模块化思想**：  Vue的一大...

			
		

	





	

		

			

				
					
ueditor编辑器发布文章后图片style_2020 年，我的微信公众号 Windows 平台流程化写作与发布心得...

				
			

			

				

					weixin_39994627的博客
				

				

					11-20
					
					423
					
				

			

		

		

			
				
2020 年，我的微信公众号 Windows 平台流程化写作与发布心得对于「个人微信公众号(以下简称公众号)的流程化发布」这个话题，其实在互联网上被很多人讨论过。说实话我自己也钻研了很长时间，至今仍不敢和人妄下定论「我已经不用担心公众号发布的事情」，但是目前的方案和以前相比，确实有了很大提升。话不多说，整理成一篇 Windows 下的公众号流程化写作与发布方案，以供后来参考。此外，我还是...

			
		

	





	

		

			

				
					
微信公众号文章自动化一键排版

				
			

			

				

					08-10
				

			

		

		

			
				
微信公众号文章自动化一键排版

			
		

	





	

		

			

				
					
编辑器，在线编辑器，微信编辑器，公众号编辑器，UEditor编辑器

				
			

			

				

					沐枫
				

				

					09-30
					
					1896
					
				

			

		

		

			
				
wxEditor 微信公众号编辑器

wxEditor是基于UEditor UTF8-PHP v1.4.3版，进行二次开发的（微信公众号编辑器也是UEditor二次开发的）一个，符合编辑发布文章 到 微信公众号上的在线图文编辑器。


打造一个符合编辑发布文章 到 微信公众号 的在线图文编辑器！


修改以前不足，提高用户体验，增添强大功能。



实例地址：
https://muguilin.github.io/wxEditor
实例效果：

QQ音乐在线搜索



网络视频、本地视频



网络图片、本

			
		

	





	

		

			

				
					
PbootCMS攻略：UEditor编辑器微信公众号图片本地化

				
			

			

				

					shihongming的博客
				

				

					12-21
					
					1066
					
				

			

		

		

			
				
PbootCMS攻略：UEditor百度编辑器微信公众号图片本地化

			
		

	





	

		

			

				
					
java微信公众号图文消息编辑器_微信公众号开发 [03] 结合UEditor实现图文消息群发功能...

				
			

			

				

					weixin_39797912的博客
				

				

					02-27
					
					394
					
				

			

		

		

			
				
0、写在前面的话如何实现微信平台后台管理中的，图文消息发送功能？大概的过程如下：通过类似表单的形式，将文章各部分内容提交到后台，封装成一个实体类，并持久化到数据库中需要推送的时候，将不同的文章选择取出交给后台，由后台组装成规范化的数据结构，调用微信的图文消息素材上传和群发接口其中文章的主体部分，我们采用UEditor富文本编辑器本文主要针对模拟表单的图片上传，以及结合UEditor进行图文内图片上...

			
		

	





	

		

			

				
					
【微信公众平台开发】发布动态新闻好帮手UEditor富文本

				
			

			

				

					爱奇途
				

				

					07-01
					
					5577
					
				

			

		

		

			
				
由于微信要做发布动态新闻，那就需要富文本。上网搜索有很多这种插件，比如CKEditor，KindEditor等；最后看到百度一款开源的UEditor，官网打开，风格设计就吸引住了自己。所以就选UEditor了。


第一步：
下载源码：由于是用php开发，所以下载版本是php版的，为了兼容以前的IE版本，选择版本1.4.2。UEditor


第二步：
把下载下来的ueditor1

			
		

	





	

		

			

				
					
（微信编辑器）UEditor富文本嵌入135编辑器

				
			

			

				

					LeeGene的博客
				

				

					06-08
					
					1万+
					
				

			

		

		

			
				
UEditor简介
UEditor是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
本文以最新版本的1.4.3.3版本为教程来讲述
具体文档参见：http://fex.baidu.com/ueditor/
135编辑器简介
135编辑器是一款提供微信公众号文章排版和内容编辑的在线工具,样式丰富,支持...

			
		

	





	

		

			

				
					
微信编辑器 wxEditor 最牛逼的富文本编辑器

					
热门推荐

				
			

			

				

					weixin_33859844的博客
				

				

					08-06
					
					1万+
					
				

			

		

		

			
				
时尚最牛逼的富文本编辑器
http://wxeditor.leipi.org/
http://www.wwei.cn/

			
		

	





	

		

			

				
					
vue篇1-1：获取富文本中的图片使用微信js-jdk实现点击图片预览

				
			

			

				

					草莓味的狗儿博客
				

				

					06-06
					
					1271
					
				

			

		

		

			
				
就目前做的一个vue公众号项目需要点击富文本中图片预览效果。
实现：
1.引入微信js-jdk 文件
（1） 使用npm命令：
npm install weixin-js-sdk --save
然后在需要页面引入
import wx from "weixin-js-sdk";
（2）在路由组件里面的，creatd()和mounted()里面放代码
2.在页面渲染富文本内容里找到标签实现点击预览；
...

			
		

	





	

		

			

				
					
springboot+ueditor1.4.33实现附件上传功能至本地

					
最新发布

				
			

			

				

					05-26
				

			

		

		

			
				
实现Spring Boot和ueditor1.4.33的附件上传至本地的步骤如下：

1. 添加ueditor1.4.33的jar包依赖，在pom.xml中添加以下代码：

```xml
<dependency>
    <groupId>com.baidu.ueditor</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3</version>
</dependency>
```

2. 配置ueditor，在resources目录下创建config.json文件，添加以下代码：

```json
{
    "imageActionName": "uploadimage",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048000,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "imageCompressEnable": true,
    "imageCompressBorder": 1600,
    "imageInsertAlign": "none",
    "imageUrlPrefix": "",
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "scrawlActionName": "uploadscrawl",
    "scrawlFieldName": "upfile",
    "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "scrawlMaxSize": 2048000,
    "scrawlUrlPrefix": "",
    "scrawlInsertAlign": "none",
    "snapscreenActionName": "uploadimage",
    "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",
    "catcherFieldName": "source",
    "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "catcherUrlPrefix": "",
    "catcherMaxSize": 2048000,
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "videoActionName": "uploadvideo",
    "videoFieldName": "upfile",
    "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoUrlPrefix": "",
    "videoMaxSize": 102400000,
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
    ],
    "fileActionName": "uploadfile",
    "fileFieldName": "upfile",
    "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
    "fileUrlPrefix": "",
    "fileMaxSize": 51200000,
    "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",
    "imageManagerListPath": "/ueditor/jsp/upload/image/",
    "imageManagerListSize": 20,
    "imageManagerUrlPrefix": "",
    "imageManagerInsertAlign": "none",
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "fileManagerActionName": "listfile",
    "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"
    ]
}
```

3. 在Controller中添加上传附件的方法，例如：

```java
@Controller
@RequestMapping("/file")
public class FileController {

    @PostMapping("/upload")
    @ResponseBody
    public Map<String, Object> uploadFile(HttpServletRequest request, HttpServletResponse response) {
        // 获取配置文件路径
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        String configPath = rootPath + "config.json";

        // 创建配置对象
        ConfigManager configManager = ConfigManager.getInstance(rootPath, "http://localhost:8080/ueditor/jsp");
        try {
            // 初始化配置
            configManager.initEnv(configPath);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }

        // 创建上传对象
        UEditorUploader uploader = new BinaryUploader(configManager, request, response);
        // 执行上传
        Map<String, Object> result = uploader.doExec();
        return result;
    }
}
```

4. 在前端页面中使用ueditor上传附件，例如：

```html
<!-- 加载ueditor -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

<!-- 创建ueditor实例 -->
<script type="text/javascript">
    var ue = UE.getEditor('editor');
</script>

<!-- 创建上传按钮 -->
<div class="btn btn-primary" onclick="chooseFile()">上传文件</div>

<!-- 上传文件 -->
<script type="text/javascript">
    function chooseFile() {
        // 创建表单对象
        var formData = new FormData();
        // 获取文件对象
        var file = document.getElementById("file").files[0];
        // 添加文件到表单中
        formData.append("upfile", file);

        // 发送ajax请求
        $.ajax({
            url: "/file/upload",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                if (result.state === "SUCCESS") {
                    // 上传成功，将附件地址添加到ueditor中
                    ue.execCommand('insertHtml', '<a href="' + result.url + '">' + result.title + '</a>');
                } else {
                    alert("上传失败");
                }
            }
        });
    }
</script>
```

以上就是实现Spring Boot和ueditor1.4.33的附件上传至本地的完整步骤。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值