Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?
Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是作为内容一起提交给服务器,不能够将图片单独保存在另外一台服务器中。如果需要单独保存则需要自已进行处理。比较麻烦。

我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部自动上传,不需要再手动一张张处理。同时能够将图片上传到我指定的接口中,服务器需要将图片单独保存在存储服务器中,比如可能是云存储,或者是分布式存储,最后直接发布内容。

感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因。

好,开始尝试UMeditor,Chrome只能获得本地路径,无法读取文件。

https://ueditor.baidu.com/website/umeditor.html(有兴趣可以试试)

难道就这么失败了?

不,但是我意外发现UMeditor竟然支持粘贴word中的多张图片(仅支持IE11,不支持IE10以下版本、以及Chrome等)

切换HTML,会看到你的图片被组织成base64

nice,机会来了,既然IE支持复制word中的多张图片直接粘贴base64,既然有了base64我们就有办法上传转图片啦!

那么我们来改造Ueditor,让他支持IE11(总比没得用强吧)

打开你的ueditor.all.js(1.4.3版本以下行号根据自己使用的版本可能不同)

1、注释掉14679行(暂时不明确有什么不良影响)

//执行默认的处理

//me.filterInputRule(root);

2、在28725行插入以下代码(如果是使用IE11粘贴会得到base64,先用占位符占位,再逐个把base64专成Blob文件并上传,上传完成再替换为你的img属性src为服务器图片url)

服务端上传代码

处理后的效果,能够批量上传word中所有的图片,真的是太方便了。无论多少张图片都可以一次性批量上传。这个功能真的是太方便了,大幅度提升了内容编辑人员的效率。以前一天只能发布一篇文章,现在能够发布100篇,这效率简直提升了100倍呀。

图片上传后保存在服务器端。而且也可以指定上传接口地址,这个也比较方便。因为我们的业务是将图片保存在单独的云存储服务器中。

3、处理ueditor提供的uploadimage方法

客户已经使用半年,没有问题,非常有用,非常方便的功能

有需要的朋友可以下载:http://blog.ncmem.com/wordpress/2019/08/07/ueditor复制word图片粘贴上传-2/

请问如何上传带图片的word的更多相关文章

  1. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  2. freemarker导出带图片的word文档

    最近做一个关于文档导出功能, 顺便学习了下freemarker,做了个关于导出带图片的word文档,模板并没有写全,只是验证代码的正确性 这只是做一个小功能,故只做了后台代码关于导出的代码,并未与前台 ...

  3. PHP之ThinkPHP框架(验证码、文件上传、图片处理)

     验证码 验证码是框架自带有的,比之前使用GD库简单方便许多,其实现原理基本相似,都是生成图片,保存验证码值到Session中,表单提交验证码,然后进行值的对比验证. 简单的显示: <form ...

  4. 目前问题:plupload上传带参数到后台

    目前问题:plupload上传带参数到后台,迟迟没有解决!!! 昨晚到23点多终于完成了! 直接上代码! var uploader = new plupload.Uploader({ //实例化一个p ...

  5. 个人永久性免费-Excel催化剂功能第102波-批量上传本地图片至网络图床(外网可访问)

    自我突破,在100+功能后,再做有质量的功能,非常不易,相对录制视频这些轻松活,还是按捺不住去写代码,此功能虽小,但功课也做了不少,希望对真正有需要的群体带来一些惊喜. 背景介绍 图床的使用,一般是写 ...

  6. Django(十九)文件上传:图片上传(后台上传、自定义上传)、

    一.基本设置 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/http/file-uploads/ 1)配置project1/settings ...

  7. 海康NVR设备上传人脸图片到人脸库

    海康开放平台--海康文档链接--海康开发包和文档下载链接 硬件:海康超脑NVR(全称Network Video Recorder,即网络视频录像机).人脸摄像机. 环境:JDK_1.8 Windows ...

  8. springboot项目上传存储图片到七牛云服务器

    springboot项目上传存储图片到七牛云服务器 问题描述: 当图片存在本地时会出现卡顿的现象.比如一篇图文混排的文章,如果图片没有加载完,可能整个文章都显示不出来,因为它们都是用的同一个服务器. ...

  9. thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印

    今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...

随机推荐

  1. GBDT笔记

    GBDT笔记 GBDT是Boosting算法的一种,谈起提升算法我们熟悉的是Adaboost,它和AdaBoost算法不同: 区别如下: AdaBoost算法是利用前一轮的弱学习器的误差来更新样本权重 ...

  2. diy操作系统 附录:gcc栈帧开启与关闭

    在gcc命令行参数中可以使用-fno-omit-frame-pointer来开启栈帧的使用,或者使用-fomit-frame-pointer选项来关闭. 然而,也可以针对某一个函数进行配置方法如下,这 ...

  3. 软件模拟IIC实现EEPROM

    ....妈的太难.    反正就是控制引脚的高低电平 实现数据的读取....参考 I2C的协议层和物理层的那个几个图,个个信号产生的电平 自己看源码去把. 头疼

  4. go for range 可以方便的对slice 切片或者 map 进行迭代循环

    package main import (     "fmt"     "math/rand"     "time" ) func main ...

  5. win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总

    win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总 2019-09-20 15:06:03 wyx100 阅读数 38更多 分类专栏: M ...

  6. 怎样理解new命令的执行过程

    通过new命令生成一个实例对象经历了四个步骤: 1. 创建一个空对象, 作为将要返回的实例; 2. 将空对象的原型指向构造函数的prototype属性; 3. 将空对象赋值给构造函数的this; 4. ...

  7. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  8. MyEclipse j2ee工程 WEB-INF 目录内容显示

    公司项目,使用的ant打包技术,,,蛋疼刚开始以为每次改个java代码都要ant 构建编译一把3-4分钟,很没有效率,, 然后实际使用中发下,可以用 auto building 和tomcat 的re ...

  9. Python练习_Python初识_day1

    题目 1.作业 1.简述变量命名规范 2.name = input(“>>>”) name变量是什么数据类型? 3.if条件语句的基本结构? 4.用print打印出下面内容: ⽂能提 ...

  10. Axure工作区间

    Axure的工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图.无需编程就可以在线框图中定义简单链接和高级交互.Axure可一体化生成线框图.HTML交互原型.规格说明Word文档.以下是 ...