废话不多说,直接上代码

前端(前端多说一句,在初始使用阶段,不知道是怎么回事,复制在看云上的文档的配置参数时,一直有错误,后台获取不到$_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. (转载)基于BIGINT溢出错误的SQL注入

    我对于通过MySQL错误提取数据的新技术非常感兴趣,而本文中要介绍的就是这样一种技术.当我考察MySQL的整数处理方式的时候,突然对如何使其发生溢出产生了浓厚的兴趣.下面,我们来看看MySQL是如何存 ...

  2. MySQL之外键、主键、自增

    1.创建外键 create table userinfo( uid int auto_increment primary key, name varchar(32), department_id in ...

  3. 14个快捷键让你的idea飞起来(新手向 + 演示)

    本期盘点一下博主在工作中,常用的13个idea快捷键,这些快捷键基本涵盖了大部分的开发场景,希望可以萌新们的idea使用效率,系统为mac系统 上一步 / 下一步撤销 / 反撤销进入一个类生成方法变量 ...

  4. tp5命名空间补充

    1.非限定名称访问方式: 直接访问当前的空间和元素 2.限定名称命名空间: 路径\方法();  相当于相对路径 以当前的命名空间为起点,去找路径上的方法 3.完全限定名称访问方式:\路径\方法();  ...

  5. js点击事件,数字累加

    <!doctype html><html lang="en"><head>    <meta charset="utf-8&qu ...

  6. java中ThreadLocalRandom的使用

    java中ThreadLocalRandom的使用 在java中我们通常会需要使用到java.util.Random来便利的生产随机数.但是Random是线程安全的,如果要在线程环境中的话就有可能产生 ...

  7. C语言实现数组循环左移

    c语言实现数组左移: 例如输入: 8 3 1 2 3 4 5 6 7 8 输出: 4 5 6 7 8 1 2 3 #include <stdio.h> int main(int argc, ...

  8. innobackupex 出现Unrecognized character \x01; marked by

    centos 7.2 mysql 5.7.16 innobackupex version 2.4.6 [root@Devops-mysql-150-115 sh]# innobackupex --de ...

  9. 《C Primer Plus(第6版)中文版》一1.12 复习题

    本节书摘来自异步社区<C Primer Plus(第6版)中文版>一书中的第1章,第1.12节,作者 傅道坤,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1. ...

  10. 谈谈你对vuex的理解

    vuex创建公有仓库的插件 1.储存公共状态 2.能够根据事件来修改状态 3.多个组件都需要变化,有机制把这个新的状态通知给所有的组件 vuex中的四个类 1.state    定义需要共享的状态 2 ...