首页 > 编程语言 >HTML编辑器粘贴图片自动上传到服务器(Java版)

HTML编辑器粘贴图片自动上传到服务器(Java版)

时间:2023-03-31 12:12:26浏览次数:50  
标签:function Java res 编辑器 HTML result router var query

 由于工作需要必须将word文档内容粘贴到编辑器中使用

但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题

考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解决这一问题

发现不管什么编辑器只要将图片转换成base64后就可以直接使用(IE8及一下可能不支持),由于编辑器中添加word文档功能也只是自己用,因此可以忽略这种浏览器了

找了很久,试用了很多编辑器,发现只有ckeditor的功能还算符合我的需求(支持自定义HTML属性)

然后我写了一个监听粘贴事件的操作,用来获取粘贴之后的file:///xxxx.jpg这种路径

<script>

    var service = {

http        : require('http'),

url         : require('url'),

querystring : require('querystring'),

fs          : require('fs'),

config      : {

    timeout : 60000,

    charset : 'utf8',

    port    : 10101,

    host    : '127.0.0.1'

},

router : {

    index : function(res, query){

        res.end('Server is running!');

    },

    check : function(res, query){

        var result = {status: 1, info: 'success'};

        result = JSON.stringify(result);

        if(typeof query.callback == 'string'){

            result = query.callback + '(' + result + ')';

        }

        res.end(result);

    },

    word : function(res, query){

        var _this = service;

        var result = {status: 0, info: 'error'};

        if(typeof query.file == 'string'){

            var img = query.file.match(/file:\/\/+(localhost)?(\S+\.(png|jpg|jpeg|gif|bmp))/i);

            console.log(img);

            if(img){

                var base64 = _this.base64_encode(img[2]);

                result.status = 1;

                result.info = 'data:image/' + img[3] + ';base64,' + base64;

            }

        }

        result = JSON.stringify(result);

        if(typeof query.callback == 'string'){

            result = query.callback + '(' + result + ')';

        }

        res.end(result);

    }

},

start : function(){

    var _this  = this;

    var Server = _this.http.createServer(function (req, res) {

        var URL = _this.url.parse(req.url);

        var receive = [];

        var router = null;

        switch(URL.pathname){

            case '/word':

                router = _this.router.word;

                break;

            case '/check':

                router = _this.router.check;

                break;

            default:

                router = _this.router.index;

        }

        req.setEncoding(_this.config.charset);

        req.addListener('data', function(data) {

            receive.push(data);

        });

        res.writeHead(200, {'Content-Type': 'text/plain'});

        res.on("close",function(){

            console.log("res closed");

        });

        req.on("close",function(){

            console.log("req closed");

        });

        req.addListener('end', function() {

            router(res, _this.querystring.parse(URL.query));

        });

    });

    Server.listen(_this.config.port, _this.config.host, 1024);

    Server.setTimeout(_this.config.timeout, function(cli){

        cli.end('timeout\n');

    });

    console.log('Server running at http://' + _this.config.host + ':' + _this.config.port);

},

//base64

base64_encode : function(file){

    var bitmap = this.fs.readFileSync(file);

    return new Buffer(bitmap).toString('base64');

}

};

service.start();

</script>

将以上代码保存为一个word.js文件

然后执行 node word.js就会自动创建一个http服务了

这个时候我们在编辑器中使用jsonp获取到处理完的图片数据替换原来的file:///xxxxxx.jpg路径就搞定了

 

当然也可以将以上代码打包成一个本地执行文件去给不懂电脑的人使用就行了(具体方法我这里就不说了)

效果展示:

 

编辑器中的图片地址已经全部替换成了服务器的图片地址,其它的用户也能够正常访问

更多详细资料可以参考这篇文章:

详细思路及源码

示例下载:

wordpaster-vue3-cli-ueditor1.5wordpaster-vue-ueditor1.5wordpaster-asp.net-ueditor1.5xwordpaster-php-ueditor1xwordpaster-jsp-ueditor1x​

标签:function,Java,res,编辑器,HTML,result,router,var,query
From: https://www.cnblogs.com/songsu/p/17275880.html

相关文章

  • Java:如何在PowerPoint幻灯片中创建散点图
    散点图是通过两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间是否存在某种关联或总结坐标点的分布模式。散点图将序列显示为一组点,值由点在图表中的位置表示,类别由图表中的不同标记表示,通常用于比较跨类别的聚合数据。本文将为您介如何通过Java代码在PowerPoint幻灯片中创......
  • 【快应用】快应用如何打开手机中的html文件
     【关键字】本地html、多媒体、路由 【问题背景】快应用中的web组件无法打开本地的html文件,仅支持加载http和https格式的链接,那么快应用中如何查看手机中的本地html文件呢? 【解决方案】快应用中虽然不能通过web组件打开的本地html文件,但是我们以通过media.pickFile方法......
  • Java(TM) Platform SE binary 打开jar文件报错
    问题描述双击jar包,使用Java(TM)PlatformSEbinary直接运行java代码,报错Error:AJNIerrorhasoccurred,pleasecheckyourinstallationandtryagain和AJavaExceptionhasoccurred.选择更多应用,进目录里选中javaw.exe也不行问题原因jdk版本与jar包的编译时的版本......
  • java学习日记20230330-异常
    异常基本概念java语言中,将程序执行中发生的不正常情况称为异常,开发中的语法错误和逻辑错误不是异常;执行中的异常事件可以分为两类error(错误),java虚拟机无法解决的严重问题:如jvm系统内部错误,资源耗尽:StackOverflowError【栈溢出】和OOM(outofmemory)exception:其他因编程错误或......
  • java条件判断和循环
    一流程控制三大流程控制语句:顺序,选择,循环二选择结构在多重if-else中,只有一个语句不加括号时:else匹配最近的,就近原则 if结构,if-else结构if(条件)  语句1;else  语句二  if(条件){  语句1;}else{  语句2;} 多重if......
  • Java线程池应用
    原文:https://tech.meituan.com/2020/04/02/java-pooling-pratice-in-meituan.html(难得的权威技术分享文章,拷贝过来防止丢失) 本文开篇简述线程池概念和用途,接着结合线程池的源码,帮助读者领略线程池的设计思路,最后回归实践,通过案例讲述使用线程池遇到的问题,并给出了一种动态......
  • 如何解决Java代码上传到Git仓库显示Git冲突的错误
    问题描述好多次进行Commit和Push,都是显示被Git仓库拒绝了,就很崩溃,靠着友友帮我才解决的问题解决需要先在GitBash里面进行gitpull更新一下,将Git仓库里面最新的内容跟更新出来,然后才能进行代码上传,记住啦!!!!!!!!!!!......
  • 每日总结-23.3.29-利于云服务器和javaweb简单实现一个网站
    每日总结-23.3.29-利于云服务器和javaweb简单实现一个网站 3月29日总结今日使用云服务器和tomcat实现了简单网站的搭建。使用工具(个人体验,仅作参考,使用其他版本或工具应该也行):1.移动云新人体验免费云服务器一台。(个人专享:通用型云主机)活动页面 (https://ecloud.10086.......
  • java.lang.String中的trim()方法的…
    String.Trim()方法到底为我们做了什么,仅仅是去除字符串两端的空格吗?一直以为Trim()方法就是把字符串两端的空格字符给删去,其实我错了,而且错的比较离谱。首先我直接反编译String类,找到Trim()方法:publicstringTrim(){returnthis.TrimHelper(WhitespaceChars,2);}Trim......
  • threejs中渲染html
    背景最近中看threejs的时候发现一个好玩的事情,可以在threejs中渲染普通的html。threejs本身可以做各种炫酷的界面,但是与用户交互的时候写起来没有用dom实现方便,但是如果可以将已有的dom渲染到threejs中,那么就可以实现非常炫酷的界面,也能提高用户的体验。依赖介绍这里使用react......