使用ueditor上传图片 JSP版本

丶小颜

于 2019-07-10 11:52:13 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/steriles_/article/details/95306069

版权

最近在做这个功能，不得不说，过程太艰辛了...

1、首先在官网下载对应的插件【下载地址】

我的项目中选用的是JSP版本，选哪个看项目和个人选择，都大同小异的。

2、然后要找到相关的依赖，网上大多是下面这个依赖，但是一直下载不下来。

<dependency>
    <groupId>com.blingblingbang</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.1.2</version>
</dependency>

依赖导入不了怎么办？网上说直接导入jar包，就是刚才下载下来的那个，但是我们是maven项目，下面这个做法这样做不合理。

后来找到了这个依赖，跟百度的那个作用是一样的

<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.3</version>
</dependency>

这个依赖下载好之后，把刚才下载的文件中，除去lib中的jar包，然后参考这个文件路径放到自己项目中去。打包之后resource下面也会有一份，等后面后台去获取初始化配置的时候，可以直接访问resource下面的文件。

3、修改config.json文件配置，主要是后面图片上传到阿里云上，所以有自己的url，不用放在服务器上，那这个imageUrlPrefix就不用加上localhost:8080之类的前缀了。【这一块主要看各项目实际情况】其他的配置，就是看个人想法，可以拿他的参数值用，也可以改成自己喜欢的。这一块，修改webpack下面的那份文件就好，前端打包完，resource下面的文件也会相应改变的。

4、修改ueditor.config.js文件，主要是修改里面的接口路径，改成后端代码里面获取初始化配置的那个接口路径。

5、找到ueditor.reset.js文件，修改上传文件的接口，根据action的状态去判断，让这个接口指向上传阿里云的方法。

这个action就是后面等接口通了之后，根据不同的动作有不同的信息。比如说页面刚打开的时候调用接口获取ueditor的初始化配置，此时这个action的信息就是config。

6、配置的话基本改的都差不多了，现在来看后台的接口，首先是获取配置的接口。

import com.baidu.ueditor.ActionEnter;
import com.yscredit.mj.base.entity.Oss;
import com.yscredit.mj.base.entity.UeditorResult;
import com.yscredit.mj.base.response.WebResponse;
import com.yscredit.mj.config.OssConfig;
import com.yscredit.mj.service.OssService;
import com.yscredit.mj.util.JsonResourceUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

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

@Controller
@RequestMapping("ueditor/jsp")
public class UeditorController {
    private static final Logger logger = LoggerFactory.getLogger(UeditorController.class);
    @Autowired
    private OssService ossService;

    @RequestMapping("/getConfigJson")
    public WebResponse getUeditorConfig(HttpServletRequest request, HttpServletResponse response) throws Exception {

        String rootPath = this.getClass().getResource("/").getPath()+"plugins";
        logger.info("rootpath============>"+rootPath);
        try {
            response.setContentType("application/json");
            request.setCharacterEncoding("utf-8");
            response.setHeader("Content-Type", "text/html");
            ActionEnter actionEnter = new ActionEnter(request, rootPath);
            String exec = actionEnter.exec();
            logger.info("exec============>"+exec);
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return WebResponse.resFail("操作失败",null);
    }

}

因为我们这个接口是要去拿config.json里面的配置的，所以这个rootPath就要指向之前步骤1中下载好的文件存放的plugins下的路径。其他的代码就是网上参考的一样，可以不用修改。这个接口的url就是跟步骤3中一样。

调试之后，那如果在页面上可以看到以下返回的json格式的数据的话，那么说明接口是成功的。

但是，问题就来了，本地开发环境上传图片什么的都OK，但是到测试环境之后，这个config.json文件一直拿不到。就很难受....

然后怎么办呢，就想到这个getConfigJson接口不就是获取哪些配置信息的吗，那么我们直接拿出来这个config.json文件，然后把这个文件读出来再用json格式返回，也是一样的效果。

    @RequestMapping("/getConfigJson")
    @ResponseBody
    public Object getConfigJson(HttpServletRequest request, HttpServletResponse response) throws Exception {
        return JsonResourceUtil.getJsonObjFromResource("/template/config.json");
    }

附上file转json的JsonResourceUtil的工具类代码

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.apache.log4j.Logger;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;

public class JsonResourceUtil {
    private static Logger logger = Logger.getLogger(JsonResourceUtil.class);

    private JsonResourceUtil() {

    }

    //filename 为文件名字 如 “/json/app_version_info.json”
    public static JSONObject getJsonObjFromResource(String filename) {
        JSONObject json = null;

        if (!filename.contains(".json")) {
            filename += ".json";
        }

        try {

            Resource resource = new ClassPathResource(filename);
            InputStream is = resource.getInputStream();
            if (is != null) {
                BufferedReader reader = new BufferedReader(new InputStreamReader(is)); // 实例化输入流，并获取网页代码
                String s; // 依次循环，至到读的值为空
                StringBuilder sb = new StringBuilder();
                while ((s = reader.readLine()) != null) {
                    sb.append(s);
                }
                json = JSON.parseObject(sb.toString());
            } else {
                logger.info("file not exist!");
            }

        } catch (Exception e) {
            e.printStackTrace();
            logger.info("readFileToString" + e.getMessage());
        }


        return json;
    }
}

其中有一个注意的地方，就是这里，用流去获取这个文件。

否则在测试环境中，会报以下错误...

java.io.FileNotFoundException:class path resource [template/config.json] 
cannot be resolved to absolute file path because it does not reside in the file system: 
jar:file:/home/XXXXX/tomcat/XXXX/XXXX.jar!/BOOT-INF/classes!/template/config.json

7、上面接口成功之后，就要接上传图片到阿里云的接口。跟步骤5中的方法对应。其中OSS配置，注意自己加上哈。

  /**
     * 上传图片
     * @param file
     * @return
     */
    @RequestMapping(value = "uploadFile", method = RequestMethod.POST)
    @ResponseBody
    public UeditorResult uploadFile(@RequestParam("file") MultipartFile file ) {
        UeditorResult result = new UeditorResult();
        if (file != null) {
            String fileType = "";
            if (file.getOriginalFilename().indexOf(".") < 1) {
                result.setState("FAIL");
                return result;
            } else {
                fileType = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."), file.getOriginalFilename().length());
                result.setType(fileType);
                result.setSize(file.getSize());
                result.setOriginal(file.getName());
            }
            String uuid = "hztl" + UUID.randomUUID().toString().replace("-", "") + fileType;
            result.setTitle(uuid);
            Oss oss = new Oss();
            oss.setKey(uuid);
            try {
                oss.setValue(file.getBytes());
            } catch (IOException e) {
                logger.error("上传图片出错",e);
                result.setState("FAIL");
                return result;
            }
            List<Oss> list = new ArrayList<>();
            list.add(oss);
            ossService.uploadOssForSteam(list);
            logger.info("上传图片的路径"+ OssConfig.ENTFILE_PDFACCESS);
            result.setUrl(OssConfig.ENTFILE_PDFACCESS+uuid);
            result.setState("SUCCESS");
            return result;
        }else {
            result.setState("FAIL");
            return result;
        }
    }

看到这有没有觉得这个接口的返回值很奇怪，用的是UeditorResult对象。

public class UeditorResult {
    //上传图片的名称
    String original;
    //图片大小
    Long size;
    //上传图片的状态；
    String state;
    //上传后图片的名称
    String title;
    //上传图片的格式
    String type;
    //上传图片的url
    String url;

    public String getOriginal() {
        return original;
    }

    public void setOriginal(String original) {
        this.original = original;
    }

    public Long getSize() {
        return size;
    }

    public void setSize(Long size) {
        this.size = size;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

这个可以直接看请求的response的，按照它的返回格式来，可以省去很多麻烦，反正也不难写，对吧，hhhh~

基本上到这里就可以实现ueditor图片上传的功能啦。要做这些，很大原因是要去了解这个源码，一层一层的点进去，看他是要什么东西。最开始的那些config配置信息，都不知道哪里链接哪里的，就很难受。看懂了，其实也就了解差不多了。