ueditor php跨域上传文件,VUE+UEditor+TP — 多端跨域多图上传
本文介绍的是多图上传
vue中使用UEditor 推荐用vue-ueditor-wrap 双向数据绑定
vue-ueditor-wrap：https://github.com/HaoChuan9421/vue-ueditor-wrap
无论是vue-ueditor-wrap还是原生ueditor，分离跨域上传的解决办法如下
这里是TP5的用法，原生ueditor的PHP包，放入extend文件夹
封装修改controller.php文件如下
namespace Uedit;
class controller
{
public function show()
{
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: token,Origin, X-Requested-With,X_Requested_With, Content-Type, Accept");
header('Access-Control-Allow-Methods: POST,GET,PUT');
$json_file = dirname(__FILE__) . "/config.json"; //斜杠\ linux+nignx不支持
date_default_timezone_set("Asia/chongqing");
error_reporting(E_ERROR);
header("Content-Type: text/html; charset=utf-8");
$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "",
file_get_contents($json_file)), true);
$action = $_GET['action'];
switch ($action) {
case 'config':
$result = json_encode($CONFIG);
break;
/* 上传图片 */
case 'uploadimage':
/* 上传文件 */
case 'uploadfile':
$result = include("action_upload.php");
break;
/* 列出图片 */
case 'listimage':
$result = include("action_list.php");
break;
/* 列出文件 */
case 'listfile':
$result = include("action_list.php");
break;
default:
$result = json_encode(array(
'state' => '请求地址出错'
));
break;
}
/* 输出结果 */
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;
}
}
}
任意建一个方法，浏览器访问该方法查看结果是否正确
如：http://www.xxx.com/xx?action=config
记得带?action=config
use Uedit\controller as Contro;
public function ue_uploads()
{
$ue=new Contro;
$res=$ue->show();
return $res;
}
跨域上传失败
注意跨域设置X-Requested-With 和 X_Requested_With
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: token,Origin, X-Requested-With,X_Requested_With, Content-Type, Accept");
header('Access-Control-Allow-Methods: POST,GET,PUT');
多图上传：上传时是post，调用config.json时是get
所以，如果是路由访问方式，注意设置为post和get，TP可以设置为Route::any()
Vue端
注意js中的UEDITOR_HOME_URL为UEditor代码存放的位置。
下面代码表示所在位置是vue项目下public\static
注意不是npm安装的ueditor，而是自己放在public\static下的
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
data() {
return {
myConfig: {
autoHeightEnabled: false,
initialFrameHeight: 240,
initialFrameWidth: '60%',
serverUrl: 'http://www.xx.com/ue_uploads',
UEDITOR_HOME_URL: '/static/UEditor/',
toolbars: [
['justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'bold',
'forecolor', 'fontsize', 'insertimage'
]
]
},
}
上传成功后，图片无前缀
修改php端config.json文件即可