springboot整合ueditor，图片上传及视频上传（后端）_ueditor怎么开启上传视频功能

简介
UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。官网提供了jsp、php、asp、asp.net4种配置方式，但没有java的。根据jsp需要返回的数据格式，假装自己是jsp给他返回。以下只提供后端的代码，前端的直接按照官网的配置就行。

工具
以下为工具来源，实际已结合到代码中了。
1.百度vue-ueditor-wrap，下载jsp、utf8的文档，解压
2.进入jsp文件夹，打开config.json，用nodepad++打开或者把后缀改成.txt打开
3.删除注释和多余回车，将代码赋值到实体类的UEDITOR_CONFIG字段

问题

1.图片上传可以，但是多图上传会报跨域。
答:1.最简单的方法就是前端和后端地址同源
   2.如果报了Request header field x_requested_with is not allowed by Access-Control-Allow-Headers in preflight response的错误，
     就让前端全局搜x_requested_with，应该有3个地方，都注释掉就行
2.图片上传本地可以，但线上会失败
答:本地测试时前端会传过来callback，我们把callback拼接config.json,线上前端不会传过来callback，我们直接返回config.json
1
2
3
4
5
6

代码

1.实体类

import lombok.Data;

@Data
public class Ueditor {
	//前端传过来的参数，用于区分是什么请求
    public final static String ACTION_CONFIG = "config";
    public final static String ACTION_UPLOADIMAGE = "uploadimage";
    public final static String ACTION_UPLOADVIDEO = "uploadvideo";
    public final static String ACTION_UPLOADFILE = "uploadfile";
    //后端返给前端的参数，需要时特定格式
    public final static String ACTION_SUCCESS = "SUCCESS";
    public final static String ACTION_FAIL = "FAIL";
    private  String state;
    private  String url;
    private  String title;
    private  String original;
    
   //关键，假装自己是jsp的东西
 public final static String UEDITOR_CONFIG = "{\n" +
            "    \"imageActionName\": \"uploadimage\",\n" +
            "    \"imageFieldName\": \"upfile\", \n" +
            "    \"imageMaxSize\": 2048000, \n" +
            "    \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "    \"imageCompressEnable\": true, \n" +
            "    \"imageCompressBorder\": 1600, \n" +
            "    \"imageInsertAlign\": \"none\", \n" +
            "    \"imageUrlPrefix\": \"\", \n" +
            "    \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"scrawlActionName\": \"uploadscrawl\",\n" +
            "    \"scrawlFieldName\": \"upfile\", \n" +
            "    \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"scrawlMaxSize\": 2048000,\n" +
            "    \"scrawlUrlPrefix\": \"\",\n" +
            "    \"scrawlInsertAlign\": \"none\",\n" +
            "    \"snapscreenActionName\": \"uploadimage\", \n" +
            "    \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"snapscreenUrlPrefix\": \"\", \n" +
            "    \"snapscreenInsertAlign\": \"none\",\n" +
            "    \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
            "    \"catcherActionName\": \"catchimage\", \n" +
            "    \"catcherFieldName\": \"source\",\n" +
            "    \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"catcherUrlPrefix\": \"\", \n" +
            "    \"catcherMaxSize\": 2048000, \n" +
            "    \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
            "    \"videoActionName\": \"uploadvideo\",\n" +
            "    \"videoFieldName\": \"upfile\",\n" +
            "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"videoUrlPrefix\": \"\",\n" +
            "    \"videoMaxSize\": 102400000, \n" +
            "    \"videoAllowFiles\": [\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"], \n" +
            "    \"fileActionName\": \"uploadfile\", \n" +
            "    \"fileFieldName\": \"upfile\",\n" +
            "    \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\", \n" +
            "    \"fileUrlPrefix\": \"\",\n" +
            "    \"fileMaxSize\": 51200000, \n" +
            "    \"fileAllowFiles\": [\n" +
            "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
            "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
            "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
            "    ],\n" +
            "    \"imageManagerActionName\": \"listimage\",\n" +
            "    \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
            "    \"imageManagerListSize\": 20, \n" +
            "    \"imageManagerUrlPrefix\": \"\", \n" +
            "    \"imageManagerInsertAlign\": \"none\", \n" +
            "    \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "    \"fileManagerActionName\": \"listfile\", \n" +
            "    \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
            "    \"fileManagerUrlPrefix\": \"\",\n" +
            "    \"fileManagerListSize\": 20,\n" +
            "    \"fileManagerAllowFiles\": [\n" +
            "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
            "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
            "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
            "    ]\n" +
            "\n" +
            "}";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

2.图片上传

    public Ueditor uploadPicForUeditor(MultipartFile file) {
        Ueditor ueditor = new Ueditor();
        ueditor.setState(Ueditor.ACTION_SUCCESS);
        try {
            String s = 上传图片服务器后返回的地址;
            ueditor.setTitle(file.getName());
            ueditor.setOriginal(file.getOriginalFilename());
            ueditor.setUrl(s);
            return ueditor;
        } catch (IOException e) {
            ueditor.setState(Ueditor.ACTION_FAIL);
            e.printStackTrace();
        }
        return ueditor;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.控制层代码

@Slf4j
@RequestMapping("/ueditor")
@Controller
public class UeditorController {

    @Resource
    UploadService uploadFile;

    @RequestMapping(value = "/cos")
    @ResponseBody
    public Object server(String action, String callback,MultipartFile upfile, HttpServletResponse response) {
        Object result = null;
        switch (action) {
            case Ueditor.ACTION_CONFIG:
                 String result1 = "";
                if (callback != null) {
                    result1 = callback + "(" + Ueditor.UEDITOR_CONFIG + ")";
                } else {
                    result1 = Ueditor.UEDITOR_CONFIG;
                }
                try {
                    response.getWriter().write(result1);//返回的十回调函数
                } catch (IOException e) {
                    e.printStackTrace();
                }
                break;
            case Ueditor.ACTION_UPLOADFILE:
            case Ueditor.ACTION_UPLOADVIDEO:
            case Ueditor.ACTION_UPLOADIMAGE:
                Ueditor ueditor = uploadFile.uploadPicForUeditor(upfile);
                result = ueditor;
                break;
            default:
        }
        return result;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37