解決:百度編輯器Ueditor跨域上傳圖片

時間 2019-11-11

標籤解決百度編輯器 ueditor 上傳圖片简体版

原文原文鏈接

問題：百度編輯器上傳圖片到本項目的時候，沒有問題，一旦跨域上傳圖片的時候就會致使圖片上傳錯誤，緣由是由於百度編輯器使用的編輯區域是IFrame，而父窗口和主窗口的數據不可跨域調用.javascript

解決方案：將百度編輯器的圖片數據提交到本項目，獲取到圖片的字節文件，接着使用遠程方法調用將字節數據發送到圖片項目存儲到硬盤，存儲成功以後，將圖片的引用URL及其餘信息以RMI的返回值返回，在本項目中將接收的上傳成功的數據翻譯到前端php

所用技術：Ueditor、spring3.0+springMVC、spring3.0+hessian3.0html

思想：前端

具體代碼：java

一、Ueditor demo.htmlweb

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>ueditor demo</title>
</head>

<body>
<!-- 加載編輯器的容器 -->
<script id="UContainer" name="content" type="text/plain" style="margin-top: 300px">
        這裏寫你的初始化內容





</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
    //test************windows
    var uploadImageUrl = 'http://127.0.0.1/ueditor/upload';



    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function (action) {
//        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        if (action == 'uploadimage') {
            return uploadImageUrl;
        } else if (action == 'uploadvideo') {
            return 'http://a.b.com/video.php';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

    var toolbarsItems = [
        [
            'anchor', //錨點
            'undo', //撤銷
            'redo', //重作
            'bold', //加粗
            'indent', //首行縮進
            'snapscreen', //截圖
            'italic', //斜體
            'underline', //下劃線
            'strikethrough', //刪除線
            'subscript', //下標
            'fontborder', //字符邊框
            'superscript', //上標
            'formatmatch', //格式刷
            //'source', //源代碼
            'blockquote', //引用
            'pasteplain', //純文本粘貼模式
            'selectall', //全選
            //'print', //打印
            'preview', //預覽
            'horizontal', //分隔線
            'removeformat', //清除格式
            'time', //時間
            'date', //日期
            'unlink', //取消連接
            'insertrow', //前插入行
            'insertcol', //前插入列
            'mergeright', //右合併單元格
            'mergedown', //下合併單元格
            'deleterow', //刪除行
            'deletecol', //刪除列
            'splittorows', //拆分紅行
            'splittocols', //拆分紅列
            'splittocells', //徹底拆分單元格
            'deletecaption', //刪除表格標題
            'inserttitle', //插入標題
            'mergecells', //合併多個單元格
            'deletetable', //刪除表格
            'cleardoc', //清空文檔
            'insertparagraphbeforetable', //"表格前插入行"
            //'insertcode', //代碼語言
            'fontfamily', //字體
            'fontsize', //字號
            'paragraph', //段落格式
            'simpleupload', //單圖上傳
            'insertimage', //多圖上傳
            'edittable', //表格屬性
            'edittd', //單元格屬性
            'link', //超連接
            'emotion', //表情
            'spechars', //特殊字符
            'searchreplace', //查詢替換
            'map', //Baidu地圖
            //'gmap', //Google地圖
            //'insertvideo', //視頻
            'help', //幫助
            'justifyleft', //居左對齊
            'justifyright', //居右對齊
            'justifycenter', //居中對齊
            'justifyjustify', //兩端對齊
            'forecolor', //字體顏色
            'backcolor', //背景色
            'insertorderedlist', //有序列表
            'insertunorderedlist', //無序列表
            'fullscreen', //全屏
            'directionalityltr', //從左向右輸入
            'directionalityrtl', //從右向左輸入
            'rowspacingtop', //段前距
            'rowspacingbottom', //段後距
            'pagebreak', //分頁
            //'insertframe', //插入Iframe
            'imagenone', //默認
            'imageleft', //左浮動
            'imageright', //右浮動
            'attachment', //附件
            'imagecenter', //居中
            'wordimage', //圖片轉存
            'lineheight', //行間距
            'edittip ', //編輯提示
            'customstyle', //自定義標題
            'autotypeset', //自動排版
            //'webapp', //百度應用
            'touppercase', //字母大寫
            'tolowercase', //字母小寫
            'background', //背景
            'template', //模板
            //'scrawl', //塗鴉
            //'music', //音樂
            'inserttable', //插入表格
            //'drafts', // 從草稿箱加載
            'charts', // 圖表
        ]
    ];
    var ue = UE.getEditor('UContainer', {
        toolbars: toolbarsItems,
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });


</script>
</body>

</html>

二、common serverspring

　　@RequestMapping(value = "ueditor/upload", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> upload(HttpServletRequest request, HttpServletResponse response) {
        try {
//            String uploadDomain = "http://127.0.0.1:8083";//本地測試
            

            Map<String, Object> result = new HashMap<>();
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
            MultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile");

            Long startTime = System.currentTimeMillis();
            String url = uploadDomain + "/hessian/hessianFileUploadImpl";
            HessianFileUpload service = (HessianFileUpload) factory.create(HessianFileUpload.class, url);
//            Map<String, Object> map = service.uploadForStream(multipartHttpServletRequest.getInputStream(),multipartFile.getOriginalFilename(), multipartFile.getSize());
//            Map<String, Object> map = service.uploadForSpring(multipartFile);
            byte[] data = multipartFile.getBytes();

            if (data != null && data.length > 5242880 || data == null) {//上限5M 5242880
                result.put("state", "文件過大,上傳失敗,上文大小上限5MB");
                return result;
            }
            System.err.println("文件大小=" + (data.length));
            Map<String, Object> map = service.uploadByBytes(data, multipartFile.getOriginalFilename(), multipartFile.getSize());
            System.err.println("duration=" + (System.currentTimeMillis() - startTime));
            return map;
        } catch (Exception e) {
            e.printStackTrace();
        }


        return null;
    }

三、Hessian接口json

public interface HessianFileUpload {



    /**
     * 按字節上傳文件
     * @return
     */
    Map<String, Object> uploadByBytes(byte[] bytes,String filename, Long available);
}

三、hessian實現windows

 /**
     * 按字節上傳,
     *
     * @param bytes
     * @return
     */
    @Override
    public Map<String, Object> uploadByBytes(byte[] bytes, String oldFilename, Long available) {
//test***********************windows本地測試
        //download
        String domain = "http://127.0.0.1:8083/";
        String realPathDown = "upload/";
        //upload
        String realPathUpload = "D:\\Program Files (x86)\\JetBrains\\IDEA_WORKSPACE\\QyImage\\src\\main\\webapp\\upload";
//test*******************END


        

//        BufferedInputStream bis = null;
        BufferedOutputStream bos = null;
        Map<String, Object> jsonObject = new HashMap<>();
        try {
            //獲取客戶端傳遞的InputStream
//            bis = new BufferedInputStream(inputStream);


            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
            String dateDir = simpleDateFormat.format(new Date());
            //上傳的路徑名*****************************
            String uploadPath = realPathUpload + File.separator + dateDir;
            logger.info("uploadPath=" + uploadPath);
            File filey = new File(uploadPath);
            if (!filey.exists()) {
                filey.mkdirs();
            }

            //獲取後綴,僅限於圖片格式
            //[".png", ".jpg", ".jpeg", ".gif", ".bmp"]
            List<String> limitsuffixList = Arrays.asList(".png", ".jpg", ".jpeg", ".gif", ".bmp");
            String suffixName = oldFilename.substring(oldFilename.lastIndexOf("."), oldFilename.length());
            if (!limitsuffixList.contains(suffixName)) {
                jsonObject.put("state", "文件格式不合法,支持的文件類型[\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]");
                return jsonObject;//文件後綴名不合法，上傳失敗
            }
            //上傳的文件名
            String filename = UUID.randomUUID() + new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()) + suffixName;
            logger.info("filename=" + filename);
            //文件名不能大於5M
            if (available > 5242880) {
                jsonObject.put("state", "文件過大,上傳失敗");
                return jsonObject;//返回上傳失敗
            }
            String saveFilename = uploadPath + File.separator + filename;


            //建立文件輸出流
            bos = new BufferedOutputStream(new FileOutputStream(new File(saveFilename)));
//            byte[] buffer = new byte[8192];
//            int r = bis.read(buffer, 0, buffer.length);
//            while (r > 0) {
//                bos.write(buffer, 0, r);
//                r = bis.read(buffer, 0, buffer.length);
//            }
            bos.write(bytes);
            String imgAccessUrl = domain + realPathDown + File.separator + dateDir + "/" + filename;
            jsonObject.put("state", "SUCCESS");
            jsonObject.put("url", imgAccessUrl);//圖片的展現路徑
            jsonObject.put("title", oldFilename);//圖片的名稱
            jsonObject.put("original", oldFilename);

//            response.getWriter().write(jsonObject.toString());
//            response.setHeader("referer","http://127.0.0.1/");
            logger.info(jsonObject.toString());
            logger.info("-------upload success！-------------");
            return jsonObject;
        } catch (IOException e) {
            throw new RuntimeException(e);
        } finally {
            if (bos != null) {
                try {
                    bos.close();
                } catch (IOException e) {
                    throw new RuntimeException(e);
                }
            }
//            if (bis != null) {
//                try {
//                    bis.close();
//                } catch (IOException e) {
//                    throw new RuntimeException(e);
//                }
//            }
        }

    }

四、hessian配置跨域

服務端配置：

web.xml

<!-- hessian 配置  默認會加載hessian-servlet.xml-->
    <servlet>
        <servlet-name>hessian</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>hessian</servlet-name>
        <url-pattern>/hessian/*</url-pattern>
    </servlet-mapping>
    <!-- hessian 配置 -->

hessian-servlet.xml

  <!--  Hessian訪問路徑 含權限認證 -->
    <bean name="/hessianFileUploadImpl" class="com.*.HessianServerProxyExporter">
        <property name="service" ref="hessianFileUploadImpl"/>
        <property name="serviceInterface">
            <value>
                com.yizhilu.os.image.framework.hessian.service.HessianFileUpload
            </value>
        </property>
    </bean>

hessian客戶端配置

<!--Ueditor上傳圖片-->
    <bean id="hessianFileUpload"
          class="org.springframework.remoting.caucho.HessianProxyFactoryBean">
        <property name="serviceInterface"
                  value="com.*.framework.hessian.service.HessianFileUpload"></property>
        <property name="serviceUrl">
            <value>${fileUploadPath}/hessian/hessianFileUploadImpl</value>
        </property>
        <property name="readTimeout">
            <value>100000</value>
        </property>
        <property name="proxyFactory">
            <bean
                    class="com.*.hessian.client.HessianClientProxyFactory" />
        </property>
        <property name="chunkedPost" value="false" />
    </bean>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。