umeditor上传图片相对路径的设置和保存(代码片段)

LinVan LinVan     2022-11-20     606

关键词:

此篇文章仅献给已实现百度富文本编辑器,想要设置相对路径并保存到数据库,方便以后项目迁移。

使用的版本为1.2.3,适用图片上传中点击以及拖拽功能。

        //保存图片相对地址的设置
        //1.请修改Uploader.java的getPhysicalPath()方法,设置返回的地址
        //2.请修改imageUp.jsp中的相对地址result
        //3.请修改image.js中的getAllPic()设置src、_src返回值

 1、修改后台代码Uploader.java

    /**
     * 根据传入的虚拟路径获取物理路径
     * 
     * @param path
     * @return
     */
    private String getPhysicalPath(String path) 
        //原版:上传文件放在请求路径(百度编辑器)上一级
//        String servletPath = this.request.getServletPath();
//        String realPath = this.request.getSession().ge tServletContext()
//                .getRealPath(servletPath);
//        return new File(realPath).getParent() +"/" +path;
        
        //修改版:上传文件放在webapp下
        String servletContext = this.request.getSession().getServletContext().getRealPath("");
        return new File(servletContext).getParent() +"/" +path;
    

2、修改imageUp.jsp

    //String result = ""name":""+ up.getFileName() +"", "originalName": ""+ up.getOriginalName() +"", "size": "+ up.getSize() +", "state": ""+ up.getState() +"", "type": ""+ up.getType() +"", "url": ""+ up.getUrl() +""";
    String pathPre = "../../../../../"; //修改版:根据imageUp.jsp相对位置进行修改,此处图片放在webapp下(不同位置自行修改)
    String result = ""name":""+ up.getFileName() +"", "originalName": ""+ up.getOriginalName() +"", "size": "+ up.getSize() +", "state": ""+ up.getState() +"", "type": ""+ up.getType() +"", "url": ""+ pathPre + up.getUrl() +""";

3、修改image.js

getAllPic: function (sel, $w, editor) 
            var me = this,
                arr = [],
                $imgs = $(sel, $w);

            $.each($imgs, function (index, node) 
                $(node).removeAttr("width").removeAttr("height");

//                if (node.width > editor.options.initialFrameWidth) 
//                    me.scale(node, editor.options.initialFrameWidth -
//                        parseInt($(editor.body).css("padding-left"))  -
//                        parseInt($(editor.body).css("padding-right")));
//                
                //修改版:设置为相对路径(请按需修改)
                var srcFixed = node.src;
                srcFixed = srcFixed.slice(srcFixed.indexOf(‘upload‘));
                srcFixed = "../../../../../" + srcFixed;
                return arr.push(
                    //_src: node.src,
                    //src: node.sr
                    _src: srcFixed,
                    src: srcFixed
                );
            );

            return arr;
        ,

这样,在数据库中保存的数据就是相对地址了,与IP、域名无关。

技术分享图片

 




用fileupload上传图片,怎么获取上传后图片的相对路径

你上传时不是通过获取过图片保存路径的绝对路径吗,比如这样:Stringpath=thisgetServletContext()getRealPath("/data/userfile/image");//文件保存路径然后你只需要把图片的文件名再保存在数据库中,在显示页面直接使用相对路径来指... 查看详情

图片保存绝对路径和相对路径的讨论

数据库中图片保存绝对路径和相对路径的讨论一、问题    1新的项目    前端代码:采用visualstudiocode开发,采用以vue.js为基础的框架,最常用组件库 Element-UI。编辑器采用 tinymce。   ... 查看详情

在tp下umeditor上传图片成功,预览失败

...图片时候处理的图片的类用的是UM自带的imagUp.class.php,将UMeditor1.2.2放到 shop/Public/statics/下面在上传图片的时候图片显示用bug工具查看显示图片路径少了shop(项目根路径)需要修改UM的配置文件umeditor.config.php修改 ,imagePath:... 查看详情

关于umeditor粘贴图片自动上传

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

kindeditor编辑器问题:图片上传后返回路径不对?(asp版)

Kindeditor编辑器4.1.10版本,上传好文件后,返回图片路径不对。图片上传路径为:'文件保存目录路径savePath="/editor/attached/"'文件保存目录URLsaveUrl=aspUrl&"/editor/attached/"图片正常上传,但返回路径就变成/editor/asp/... 查看详情

数据库存储图片路径并显示图片

 这几天在做图片的上传和显示,上传时保存图片到文件夹中并将其存储路径保存到数据库里,显示时用数据绑定显示让此图片控件连接上图片所在的路径之前在网上收集了相关资料,大多数人表示这个路径应该是绝对路径而... 查看详情

编辑网页,上传后,无法显示图片,怎么办?

...录名和密码,登陆ftp网站上的asp文件和图片就可以随意的上传和下载了2、打开dreamweaver软件,使用ftp服务器3、把要放在网页上的图片上传到ftp里的image文件夹里4、在要修改的网页上插入图像,并且保存和上传到ftp里结果:输入... 查看详情

java网络商城项目springboot+springcloud+vue网络商城(ssm前后端分离项目)九(设置nginx保存图片的代理路径,修改和删除品牌)(代码片段)

...、将图片保存到虚拟机(设置nginx代理路径)1、上传相关图片https://download.csdn.net/download/qq_44757034/20929216下载相关图片将图片上传到Linux当中的/ley 查看详情

umeditor实现ctrl+v粘贴word图片并上传

​这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@& 查看详情

html5+php实现保存文件夹相对路径递归上传在线浏览

...效果吧。由于项目涉及敏感词汇我就码了一下。1.选择要上传的文件夹,上传以后默认都在根目录下。2.看看后台管理界面的效果,实现多级目录,可以显示图片内容,返回上一级正文:谈到文件夹上传,应该都不觉得难,一个in... 查看详情

4.项目首页显示登录页面(代码片段)

首页轮播图admin站点配置支持图片上传下载pillow模块pipinstallPillow默认情况下,Django会将上传的图片保存在本地服务器上,需要配置保存的路径。我们可以将上传的文件保存在静态文件static目录中,添加如下上传保存目录信息。1.... 查看详情

怎样让kindeditor上传图片使用绝对路径

参考技术A默认情况下kindeditor上传的图片在编辑器的根目录/attached/目录下。以日期建一个目录,然后保存文件。有些时候大概我们并不想这样。考虑到更新编辑器,或更换编辑器不太方便。比如我现在想把上传的文件保存在根目... 查看详情

pb如何设置图片相对路径

...省略。比如你的应用在D:\PB程序里面。这样你设置一个图片,假设图片在这个文件夹下的文件夹pic里面。那么文件的路径写:pic\图片名称这样就可以了。修改属性的位置,选中图片控件,然后看右侧有个picturename一项,在... 查看详情

关于tomcat和nginx图片上传以及访问的路径问题(代码片段)

...的同学可以去看一下。今天我要总结的东西是如何将文件上传到自己的服务器并且访问。当我们安装好Tomcat和Nginx的时候,在其安装目录下面都会有一个根目录,Tomcat的根目录是 /va 查看详情

wpfimagesource设置相对路径图片(代码片段)

 BitmapImagebt=newBitmapImage(newUri("Images\3_u10484.png",UriKind.Relative));this.Img1.Source =bt;  查看详情

java示例代码_在简单jsp文件上传中设置临时目录相对路径?FIleNotFound异常

java示例代码_在简单jsp文件上传中设置临时目录相对路径?FIleNotFound异常 查看详情

前端基础资源路径(代码片段)

...够知道相对路径和绝对路径的区别当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:<imgsrc="images/logo.png">这里的src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路... 查看详情

文件上传,图片加水印

文件上传:  所用控件:FileUpload  使用时的思路:  1、判断用户是否选中了文件    FileUpload.FileName获取选中的文件名,判断长度,如果长度大于零就代表已经选择了文件    JS端:通过ID获取控件,然后控件的va... 查看详情