Vue+Ueditor+Lumen上传图片以及获取文本框值

本文链接：https://blog.csdn.net/weixin_44577059/article/details/103279146

这阵子做了一个项目，前端用Vue后台Lumen，因为项目需要，在项目里引入了Ueditor，但是第一次用，在配置的过程中碰到好多坑，再次记录一下

1.在Ueditor官网下载 http://ueditor.baidu.com/website/download.html
在这里插入图片描述
2.将下载下来的文件解压之后放在vue项目下static目录下，如图

修改ueditor.config.js文件

接下来在main.js文件里引入

import '../static/utf8-php/ueditor.config.js';
import '../static/utf8-php/ueditor.all.min.js';
import '../static/utf8-php/lang/zh-cn/zh-cn.js';
import '../static/utf8-php/ueditor.parse.min.js';

引入完成之后在components目录下创建ue.vue

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'ue',
    data () {
      return {
        editor: '',
      }
    },
    props: {
      value: '',
      config: {}
    },
    mounted () {
      const _this = this
      this.editor = window.UE.getEditor('editor', this.config)
      this.editor.addListener('ready', function () {
        _this.editor.setContent(_this.value)
      })
    },
    methods: {
      getUEContent () {
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

之后在那个页面使用就在那个页面引入

import Uediter from '@/components/ue.vue'
export default {
		components: {
			Uediter,
			UediterOne
		},
		data() {
			return {
			}
		}
	}

在上面调用

<Uediter :value="ruleForm.summary"  ref="summary"></Uediter>//ruleForm.summary是你的值，在下面data里定义

获取编辑框里的值

this.$refs.summary.getUEContent(),

这里一定要注意，如果在当前页面调用两次编辑器的话，ue.vue这样改

成功调用就能显示了，我这里是已经在ueditor.config.js里的toolbars配置过了

2.现在开始配置后台，复制utf8-php/php到lumen框架下public目录下
在这里插入图片描述
修改lumen框架下public/ueditor/php/config.json文件

  /*允许跨域的域名*/
    "uploadDomain": [
        "http://localhost",
        "http://new_shareip.net",
        "http://vue.com:81"
		//这个好像没有用到，因为刚开始会一直报跨域问题
    ],
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", 
    "imageFieldName": "upfile", 
    "imageMaxSize": 2048000, 
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], 
    "imageCompressEnable": true, 
    "imageCompressBorder": 1600, 
    "imageInsertAlign": "none", 
    "imageUrlPrefix": "http://vue.com", //图片访问的域名，当前lumen框架的域名
    "imagePathFormat": "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", //图片的存储路径。不用改

接下来修改php/controller.php文件

<?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/Shanghai");
error_reporting(E_ERROR);
header("Content-Type: text/html; charset=utf-8");
header('Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS');
header("Access-Control-Allow-Headers:X-Requested-With,x_requested_with");
header("Access-Control-Allow-Credentials:true");//跨域session
 
$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);
if(!empty($CONFIG['uploadDomain'])){ //允许跨域的域名
    foreach($CONFIG['uploadDomain'] as $k => $v){
        header("Access-Control-Allow-Origin:".$v);
    }
}
$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;
}
 
/* 输出结果 */
if (isset($_GET["callback"])) {
    if (preg_match("/^[\w_]+$/", $_GET["callback"])) {
        echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
    } else {
        echo json_encode(array(
            'state'=> 'callback参数不合法'
        ));
    }
} else {
    // 判断是否单张图片上传
    if(isset($_REQUEST['issimpleupload']) && $_REQUEST['issimpleupload'] == 'true' && !empty($_REQUEST['callbackUrl'])){
        // callbackUrl是 vuejs的路由回调地址
        header('Location:'.$_REQUEST['callbackUrl'].'?ueResult='.$result);
        exit;
    }
    echo $result;
}