tomcat项目访问非项目内资源文件——使用wangEdiotr富文本框上传图片至本地磁盘有感

 

 

我之前用过一个富文本框KindEdiotr，当时用这个富文本框上传图片只能上传到项目目录下，上传到本地磁盘则访问不到，于是每次打包都需要先把这个图片文件夹复制出来，防止丢失，随着项目使用，图片文件夹越来越大，给每次部署都带来麻烦，甚至因为有人不知道这个文件 而不小心误删了，当时时间太紧 一直没能解决，最近我用了一个新的富文本插件叫做wangEditor，在做这个上传图片功能的时候 我终于解决了这个问题，以下是这个问题的记录。

1.简单记录下wangEditor的使用

（1）引入js文件

（2）js代码如下

​
​
       $(document).ready(function() {
           var E = window.wangEditor;
            //这里的id为<div id="editor"中的id.
            var editor = new E('#editor');
            editor.customConfig.onchange = function (html) {
                //富文本框数据变化时触发
         
            }
            //设置富文本框toolbar
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                // 'video',  // 插入视频
                'code',  // 插入代码
                'undo',  // 撤销
                'redo'  // 重复
            ];
            debugger
            // 上传图片到服务器
            editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
            editor.customConfig.uploadImgServer = '/api/myfile/imgUpload.do'; //设置上传文件的服务器路径
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
            //自定义上传图片事件
            editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {

                },
                success: function (xhr, editor, result) {
                    console.log("上传成功");
                },
                fail: function (xhr, editor, result) {
                    console.log("上传失败,原因是" + result);
                },
                error: function (xhr, editor) {
                    console.log("上传出错");
                },
                timeout: function (xhr, editor) {
                    console.log("上传超时");
                }
            }
            //创建编辑器
            editor.create();   
            editor.txt.html()；//获得富文本框的html
           editor.txt.text();//获得富文本框文本内容
        });

       
        
        //解决富文本框转移字符问题 设置editor.txt.html()；值的时候需要对值进行                                  
         //editor.txt.html(escape2Html(content));若内容从后台传过来并存在单个反斜杠，则需要在            
         //后台对其进行处理content.replaceAll("\\\\","\\\\\\\\") ;
        function escape2Html(str) {
            var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
            return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
        }

​

​

（3）jsp页面代码 

    <div class="add_list" style="height:350px;">
                <h5><em class="wildcard">*</em>任务内容：</h5>
                <div id="editor" style="width:842px;margin-left: 120px;margin-top:-10px;">
                    　<!-- 默认显示 -->
                    <c:if test="${workTask.content==''||workTask.content==null}">
                        <p>请输入任务内容</p>
                    </c:if>
                </div>
                <input type="hidden" name="content"id="content" >
                <input type="hidden" name="content_text"id="content_text" >
            </div>

(4)后台图片上传代码

  //图片上传
    @RequestMapping(value = "/imgUpload",method=RequestMethod.POST)
    @ResponseBody
    public WangEditor uploadFile(
            @RequestParam("myFile") MultipartFile multipartFile) {
        try {
            String path = "C:/ImgUpload";
            InputStream inputStream = multipartFile.getInputStream();

            // 获取文件名称
            String filename = multipartFile.getOriginalFilename();
            String newFilename= filename.substring(0,filename.lastIndexOf("."))+new Date().getTime()+
                    filename.substring(filename.lastIndexOf("."),filename.length());
            File file = new File(path, newFilename);
           // File file =new File(path);
            //如果保存文件的地址不存在，就先创建目录
          /*  if(!file.exists()){
                file.mkdirs();
            }*/
            FileUtils.copyInputStreamToFile(inputStream, file);
            // 返回图片访问路径
            String url =File.separator+"imgUpload"+File.separator+newFilename;

            String [] str = {url};
            WangEditor we = new WangEditor(str);
            return we;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }

2.返回图片url后，前端的访问不到本地磁盘资源的问题 有两种解决方法

1. idea设置tomcat 如下图

打开配置页面

选中截图所示选项

 

新加source 将磁盘中保存图片文件的路径选中 并添加Application context 路径 例如 /imgUpload

 

但是这种方法只能用于idea中启动项目，若是直接用tomcat部署在服务器上的 则无效，所以介绍第二种方法

  2.修改tomcat配置文件实现（这种方法 上图选中的地方无需选中）

打开tomcat配置文件conf/server.xml

在host里面增加这句话 <Context  path="/imgUpload"  docBase="C:\ImgUpload" reloadable="true"/>

那么在项目中即可访问项目外的磁盘资源了