百度ueditorPHP版本编辑器将图片上传到非项目根路径

简介: UEditor 的页面在 a.com 下,serverUrl指向域名在 b.com 域下。这个官方文档是有介绍的:跨域上传。链接:http://fex.baidu.com/ueditor/#dev-crossdomain

QQ图片20220426214908.jpg

这里记录下  百度ueditorPHP版本编辑器将图片上传到非项目根路径

通俗点解释就是:


UEditor 的页面在 a.com 下,serverUrl指向域名在 b.com 域下


这个官方文档是有介绍的:跨域上传,这个我就不废话了。


下边是链接:


http://fex.baidu.com/ueditor/#dev-crossdomain

 

说实话,我没看懂……主要是麻烦(我懒)

 

我就想,我先把图片传到A下,成功之后,再将A下的图片剪切到B下。


然后再将config.php下的imageUrlPrefix(图片访问路径前缀)修改成B的域名。

这应该是可行的吧。


嗯,实践出真知。开始我漫长的调试之路


最开始,尝试了一下move_upload_file()  函数。


结果,报错。


百度了一下 move_upload_file() 函数作用的是 HTTP POST 上传的图片。


又百度了一下。Php把一个文件复制剪切到另一个文件夹的函数还有


copy()   rename()


这两个试了一下,但是有点麻烦。copy复制成功之后,还需要删除源文件。

 

Emmmmm……这可如何是好。


这个时候,我想到了万能的linux命令。


mv /www/1.txt /aaa/   将www目录下的1.txt文件移动到aaa目录下


不多废话了,上代码


<?php
//header('Access-Control-Allow-Origin: http://www.baidu.com'); //设置http://www.baidu.com允许跨域访问
//header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header
date_default_timezone_set("Asia/Chongqing");
error_reporting(E_ERROR);
header("Content-Type: text/html; charset=utf-8");
header("Access-Control-Allow-Origin");
$CONFIG = json_decode(preg_replace("//*[sS]+?*//", "", file_get_contents("config.json")), true);
$action = $_GET['action'];
switch ($action) {
    case 'config':
        $result =  json_encode($CONFIG);
        break;
    /* 上传图片 */
    case 'uploadimage':
    /* 上传涂鸦 */
    case 'uploadscrawl':
    /* 上传视频 */
    case 'uploadvideo':
    /* 上传文件 */
    case 'uploadfile':
        $result = include("action_upload.php");
        break;
    /* 列出图片 */
    case 'listimage':
        $result = include("action_list.php");
        break;
    /* 列出文件 */
    case 'listfile':
        $result = include("action_list.php");
        break;
    /* 抓取远程文件 */
    case 'catchimage':
        $result = include("action_crawler.php");
        break;
    default:
        $result = json_encode(array(
            'state'=> '请求地址出错'
        ));
        break;
}
//********************************* 移动图片start ************************************
$date = date("Ymd",time());
$dir = "/var/www/html/aaa/public/ueditor/".$date;//目标文件夹(如果不存在,就创建)
if(!is_dir($dir)){
    mkdir($dir);
}
$a = json_decode($result,true);//对上传成功之后的结果进行解析(如果图片上传成功)
if($a['url'] != null && $a['url'] != ''){
    $url = "/var/www/html/bbb/public".$a['url'];//这是上传图片路径
    $new_url = $dir.'/';//这是剪切目标路径
    $linux = "mv ".$url.' '.$new_url;//拼接linux命令
    exec($linux);//执行命令
    $a['url'] = '/ueditor/'.$date.'/'.$a['title'];//给解析的结果集重新赋值
    $result = json_encode($a);//再将其转成json串,输出到前台
}
//********************************* 移动图片end ************************************
/* 输出结果 */
if (isset($_GET["callback"])) {
    if (preg_match("/^[w_]+$/", $_GET["callback"])) {
        echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
    } else {
        echo json_encode(array(
            'state'=> 'callback参数不合法'
        ));
    }
} else {
    echo $result;
}


我后添加的代码都有对应的注释。将上边的路径换成你自己的应该就好用了。


注意:json_decode()  括号内需要 添加一个true,不然会报错。



目录
相关文章
|
3月前
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
130 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
|
8月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
149 0
|
8月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
7月前
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
615 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
|
7月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
7月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
7月前
Vue3项目引入 vue-quill 编辑器组件并封装使用
本文介绍了如何在Vue3项目中引入并封装使用`vue-quill`富文本编辑器组件,包括安装配置、父页面实现、子组件设计以及使用方法和效果展示。
1643 0
|
9月前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
8月前
|
JavaScript
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
451 0
|
8月前
|
前端开发 JavaScript Java
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb

热门文章

最新文章