图片自动上传服务器上,wangEditor粘贴图片自动上传到服务器(Java版)

本文介绍如何通过前端UEditor实现Word文档中图片的批量上传,并详细解释了上传过程中的关键技术步骤,包括图片路径处理、后台接收及保存等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如何做到 ueditor批量上传word图片?

1、前端引用代码

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

编辑器完整版实例-1.2.6.0

这里写你的初始化内容

var pasterMgr = new WordPasterManager();

pasterMgr.Config["PostUrl"] = "http://localhost:81/WordPaster2/WordPasterUEditor1x/php/upload.php"

pasterMgr.Load();//加载控件

UE.getEditor('myEditor',{onready:function(){//创建一个编辑器实例

pasterMgr.SetEditor(this);

}});

请求

文件上传的默认请求是一个文件,作为具有“upload”字段的表单数据。

响应:文件已成功上传

当文件成功上传时的JSON响应:

uploaded- 设置为1。

fileName - 上传文件的名称。

url - 上传文件的URL。

响应:文件无法上传

uploaded- 设置为0。

error.message - 要显示给用户的错误消息。

2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持

目前项目是用了一种变通的方式:

先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示

(富文本显示有个坑:没找到直接给富文本赋值的方法 要先销毁 记录下

success : function(data) {

$('#content').attr('value',data.imagePath);

var editor = CKEDITOR.instances["content"]; //你的编辑器的"name"属性的值

if (editor) {

editor.destroy(true);//销毁编辑器

}

CKEDITOR.replace('content'); //替换编辑器,editorID为ckeditor的"id"属性的值

$("#content").val(result);    //对editor赋值

//CKEDITOR.instances.contentCkeditor.setData($("#content").text());

}

3.接收上传的图片并保存在服务端

ob_start();

//201201/10

$timeDir =date("Ym")."/".date("d");

$uploadDir =dirname(__FILE__).'/upload/'.$timeDir;

$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";

//相对路径 http://www.ncmem.com/upload/2012-1-10/

$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/" . $timeDir . "/";

//自动创建目录。upload/2012-1-10

if(!is_dir($uploadDir))

{

mkdir($uploadDir,0777,true);

}

//如果PHP页面为UTF-8编码,请使用urldecode解码文件名称

//$fileName = urldecode($_FILES['postedFile']['name']);

//如果PHP页面为GB2312编码,则可直接读取文件名称

$fileName = $_FILES['file']['name'];

$tmpName = $_FILES['file']['tmp_name'];

//取文件扩展名jpg,gif,bmp,png

$path_parts =pathinfo($fileName);

$ext = $path_parts["extension"];

$ext =strtolower($ext);//jpg,png,gif,bmp

//只允许上传图片类型的文件

if($ext == "jpg"

|| $ext == "jpeg"

|| $ext == "png"

|| $ext == "gif"

|| $ext == "bmp")

{

//年_月_日_时分秒毫秒.jpg

$saveFileName = $fileName;

//xxx/2011_05_05_091250000.jpg

$savePath = $uploadDir . "/" . $saveFileName;

//另存为新文件名称

if (!move_uploaded_file($tmpName,$savePath))

{

exit('upload error!' . "文件名称:" .$fileName . "保存路径:" . $savePath);

}

}

//输出图片路径

//$_SERVER['HTTP_HOST']   localhost:81

//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php

$reqPath =str_replace("upload.php","",$_SERVER['REQUEST_URI']);

echo $relatPath .  $saveFileName;

header('Content-type: text/html; charset=utf-8');

header('Content-Length: ' .ob_get_length());

?>

效果展示:

0a9cbb867e9ebe1b3b72741e51b7fefa.png

3b713b09c6518b83a3006b6fe3664e3d.png

对于wangeditor vue粘贴图片的问题,你可以按照以下步骤来实现: 1. 首先,确保已经安装了wangeditor vue插件,可以通过npm或yarn进行安装。 2. 在你的Vue组件中导入wangeditorwangeditor的样式文件: ```javascript import 'wangeditor/dist/css/wangEditor.css'; import { createEditor } from 'wangeditor'; ``` 3. 在Vue组件的mounted钩子函数中初始化wangeditor编辑器: ```javascript mounted() { const editor = createEditor(this.$refs.editor); editor.config.uploadImgServer = '/your-upload-img-server'; // 设置图片上传的服务器地址 editor.config.uploadImgHeaders = { 'Authorization': 'Bearer ' + localStorage.getItem('token') // 设置图片上传时的请求头 }; editor.config.uploadImgHooks = { before: (xhr, editor, files) => { // 在上传图片之前执行的逻辑,可以进行一些校验或者预处理操作 }, success: (xhr, editor, result) => { // 图片上传成功后的回调函数 }, fail: (xhr, editor, error) => { // 图片上传失败后的回调函数 }, error: (xhr, editor) => { // 图片上传出错时的回调函数 }, timeout: (xhr, editor) => { // 图片上传超时时的回调函数 }, customInsert: (insertImgFn, result, editor) => { // 自定义插入图片的方式,可以根据result中的图片url来自定义插入图片的逻辑 // 示例代码: const url = result.data.url; insertImgFn(url); } }; editor.create(); } ``` 4. 在Vue模板中添加一个容器元素来显示wangeditor编辑器: ```html <template> <div> <div ref="editor"></div> </div> </template> ``` 注意:上述代码中的`/your-upload-img-server`需要替换为你自己的图片上传服务器地址,同时你还需要根据实际情况进行配置和处理上传图片的逻辑。 通过以上步骤,你就可以在wangeditor vue中实现粘贴图片的功能了。希望对你有所帮助!如有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值