博客

最近使用ueditor富文本发现复制网上的文章插入，图片地址不能替换成自己服务器，只能下载来再粘贴上传，感觉太麻烦，所以写下此文章。利用springboot+阿里云OSS 替换例如百度上的图片的地址换成自己的服务器地址

感谢此博主提供的思路


https://blog.csdn.net/simple436335/article/details/78583331

html部分

 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage'){
                console.log("1");
                return 'blogPicUpload'; /* 你自己的图片上传action */
            }else if(action == 'catchimage'){
                console.log("2");
                return 'blogUploadRemote'; /* 远程抓取图片上传action */
            }
            else{
                console.log("3");
                return this._bkGetActionUrl.call(this, action);
            }
        };
       // 复写UEDITOR的getContentLength方法 解决富文本编辑器中一张图片或者一个文件只能算一个字符的问题,可跟数据库字符的长度配合使用
        UE.Editor.prototype._bkGetContentLength = UE.Editor.prototype.getContentLength;
        UE.Editor.prototype.getContentLength = function(){
            return this.getContent().length;
        }

远程抓取图片catchimage配置

 /**
     * 上传配置：即不走config.json，模拟config.json里的内容，解决后端配置项不正确，无法上传的问题
     * @return
     */
    @RequestMapping("/ueditor/config")
    @ResponseBody
    public String uploadConfig() {
        String s = "{\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" +
                "                \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"xu-travel.oss-cn-shenzhen.aliyuncs.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 }";



                              return s;
    }

前端controller

/**
     * 解决Ueditor图片远程抓取上传问题
     * @param sources
     * @return
     */
    @RequestMapping("/blogUploadRemote")
    @ResponseBody
    public Map<String,Object> blogUploadRemote(@RequestParam("source[]") String[] sources)throws Exception{


        Map<String,Object> map = new HashMap<String,Object>();
        map.put("list",service.ueditorUpload(sources));
        map.put("state","SUCCESS");

           return map;

    }

之所以用source[]接受是因为ueditor抓取远程图片发送请求会携带参数source[]用于存储img里src值

主要的实现方法

  /**
     * ueditor远程抓取图片 （替换自己的oss服务器）
     * @param sources
     * @return
     */
    @Override
    public List<Map<String, Object>> ueditorUpload(String[] sources) throws Exception {

        List<Map<String, Object>> result = new ArrayList<Map<String, Object>>();

        for (int i = 0; i < sources.length; i++) {

            System.out.println("----------------------------->>>>" + sources[i]);

            String url = sources[i];
            System.out.println("source========================" + sources[i]);
            System.out.println("url.trim==============================" + url.trim());
            URL imgURL = new URL(url.trim());//转换URL
            HttpURLConnection urlConn = (HttpURLConnection) imgURL.openConnection();//构造连接
            urlConn.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.79 Safari/537.36");
            urlConn.connect();
            if (urlConn.getResponseCode() == 200) {//返回的状态码是200 表示成功
                InputStream ins = urlConn.getInputStream(); //获取输入流,从网站读取数据到 内存中

                ObjectMetadata metadata = new ObjectMetadata();
                // 指定Content-Type
                metadata.setContentType(urlConn.getContentType());

                String fileName = randomFileName();
                String filePath = getFilePath(fileName);
                try {
                    ossClient.putObject(aliyunConfig.getBucketName(),filePath , ins ,metadata);
                    Map<String,Object> map = new HashMap<String,Object>();
                    map.put("source",sources[i]);
                    map.put("url",this.aliyunConfig.getUrlPrefix() + filePath);
                    map.put("state","SUCCESS");
                    result.add(map);
                } catch (Exception e) {
                    System.out.println("上传失败");
                }



            }


        }
        return result;
    }


   /**
     * 获取图片文件路径
     * @param sourceFileName
     * @return
     */
    @Override
    public String getFilePath(String sourceFileName) {

        DateTime dateTime = new DateTime();
     return "images/" + dateTime.toString("yyyy")
       + "/" + dateTime.toString("MM") + "/" + dateTime.toString("dd") + "/" + System.currentTimeMillis() +
                RandomUtils.nextInt(100, 9999) + "." +
                StringUtils.substringAfterLast(sourceFileName, ".");

    }

  /**
     * 生成随机图片文件名，"年月日时分秒"格式
     */
    @Override
     public  String randomFileName() {
        Date date = new Date(System.currentTimeMillis());
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMddHHmmss");
        String fileName = simpleDateFormat.format(date);
        return fileName;
    }

原本：

替换成功后