废话不多说,直接上代码

前端(前端多说一句,在初始使用阶段,不知道是怎么回事,复制在看云上的文档的配置参数时,一直有错误,后台获取不到$_file,整整一上午,下午上网搜了一下别人的上传图片代码才好用,不知道是不是官方弄错了,咱也不敢说,咱也不敢问的)

<div id="editor"></div>
<script>
var E = window.wangEditor
var editor = new E('#editor')
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
// 'foreColor', // 文字颜色
// 'fontSize', // 字号
// 'fontName', // 字体
// 'italic', // 斜体
// 'underline', // 下划线
// 'strikeThrough', // 删除线 // 'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
//过滤粘贴过来的文本样式
editor.customConfig.pasteFilterStyle = true
//忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = false
//上传图片的配置
editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer = '设置上传路径'; //设置上传文件的服务器路径
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
//自定义上传图片事件
editor.customConfig.uploadImgHooks = {
before : function(xhr, editor, files) { },
success : function(xhr, editor, result) {
console.log("上传成功");
},
fail : function(xhr, editor, result) {
layer.msg("上传失败");
},
error : function(xhr, editor) {
console.log("上传出错");
},
timeout : function(xhr, editor) {
console.log("上传超时");
}
}
editor.create()
E.fullscreen.init('#editor');
</script>

  后端代码,后端是自己写的,之前一直从网上扒人家的代码,昨天自己匆匆学习了一下,自己写了个简单的代码去实现,实现逻辑无非创建到指定目录下(file_exists函数),如果该路径下没有该文件夹,就新建一个文件夹,创建文件夹用mkdir,就是linux的创建文件夹命令,move_uploaded_file($tmp,$dest),$tmp是文件上传的过来的临时路径,$dest是设置的保存路径,并且是系统的绝对路径,带文件名。我使用的框架是tp5.1,它是不支持常量的,所以要使用系统常量必须引入think\facade\Env,后期会用到图片压缩的功能,所以后期还会学习记录一下前端和后端的图片压缩。

public function up()
{
$file = $_FILES;
if(empty($file)){
$result["error"] = "1";
$result['data'] = '';
}else{
$tmp = $file['myFile']['tmp_name'];
$houzhui = substr($file['myFile']['type'],6);
$foder = date('Ymd',time());
$fileName = 'XX'.time().'.'.$houzhui;
$root_path = Env::get('root_path');
$dest = $root_path.'/public/upload/image/'.$foder.'/'.$fileName;
if(!file_exists($root_path.'/public/upload/image/'.$foder)){
mkdir($root_path.'/public/upload/image/'.$foder);
}
$result = move_uploaded_file($tmp,$dest); if($result){
return json(['errno'=>0,'data'=>['/ueditor/php/upload/image/'.$foder.'/'.$fileName]]);
}else{
return json(['errno'=>2,'data'=>['上传图片失败']]);
} }
}

  写的不好,仅供自己参考使用

												

wangeditor在移动端的web应用的更多相关文章

  1. JS判断当前使用设备是pc端还是web端(转MirageFireFox)

    js判断当前设备 最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url we ...

  2. dr-helper项目设计介绍(一个包括移动端和Web端的点餐管理系统)

    一.源代码路径 https://github.com/weiganyi/dr-helper 二.界面 通过浏览器訪问Web服务,能够看到界面例如以下: ADT-Bundle编译project生成dr- ...

  3. 1、移动端 2、后台 3、 移动端,Web 端 4、 PC端

    移动端: 1.公众号:停开心 住总物业 2.app:  iso Android 停开心,住总停开心 后台:停开心智慧停车管理平台(所有的停车场) 移动端,Web端: 海投OA,公司OA PC端:收费软 ...

  4. SignalR控制台自托管服务端向web客户端指定用户推送数据,客户端断线重连

    一.前言 SignalR是微软推出的开源实时通信框架.其内部使用Web Socket, Server Sent Events 和 Long Polling作为底层传输方式,SignalR会根据客户端和 ...

  5. 移动端与Web端疫情数据展示

    1.题目要求 2.整体思想 首先是在前两阶段已经完成的echarts可视化.利用Jsoup爬取疫情数据基础上来进行调用与完善.大致思想是在Android Studio上完成交互去调用ecplise中的 ...

  6. 移动端调试Web页面

    移动端调试Web页面 虽然可以在PC下,通过开发者工具,模拟移动端,但是这样只能模拟页面样式,对于代码的执行情况是无法模拟的,所以在此结合实际调试经验,针对安卓与IOS设备,进行总结. IOS 安卓 ...

  7. 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

    web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/  很厉害的一个个人产品 http://amazeui ...

  8. 移动端与web端的测试点的差别

    单纯从功能测试的层面上来讲的话,APP 测试.web 测试 在流程和功能测试上是没有区别的.根据两者载体不一样,则区别如下:系统结构方面web项目,b/s架构,基于浏览器的:web测试只要更新了服务器 ...

  9. 如何利用cURL和python对服务端和web端进行接口测试

    工具描述 cURL是利用URL语法在命令行方式下工作的文件传输工具,是开源爱好者编写维护的免费工具,支持包括Windows.Linux.Mac等数十个操作系统,最新版本为7.27.0,但是我推荐大家使 ...

随机推荐

  1. 刚从一道题发现的一些东西,PHP笔记,关于extract和null 空字符串

    队友发给我的一道extract变量的最基础的题目,他发现了一些问题,当传入shiyan=&flag=0时出flag,当传入shiyan=0&flag=0时不出flag,传入shiyan ...

  2. Springboot:员工管理之环境准备(十(1))

    1:静态资源 下载静态资源:https://files.cnblogs.com/files/applesnt/ztzy.zip 项目下载:https://files.cnblogs.com/files ...

  3. pytorch中tensor张量的创建

    import torch import numpy as np print(torch.tensor([1,2,3])) print(torch.tensor(np.arange(15).reshap ...

  4. Ansible playbook 编程

    Ansible playbook 编程详解与各种小案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务数据乱放: ...

  5. Solidity的Bytecode和Opcode简介

    Solidity的Bytecode和Opcode简介 随着我们更深入地编写智能合约,我们将遇到诸如" PUSH1"," SSTORE"," CALLV ...

  6. 自动化部署jenkins

    jenkins下载网站 https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat/ 一.配置环境 [root@localhost ~]# hostname ...

  7. CSS样式1

    编写CSS样式: 1.标签的style属性 如:<div style="width:980px;"></div> 2.写在head里面,style标签中写样 ...

  8. 电子书下载:C# Database Basics

    下载: http://download.csdn.net/detail/maxwoods/4089269

  9. div/dom元素拖拽缩放插件,纯js实现拖拽缩放,不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  10. 详解Linux 安装 JDK、Tomcat 和 MySQL(图文并茂)

    https://www.jb51.net/article/120984.htm