废话不多说,直接上代码

前端(前端多说一句,在初始使用阶段,不知道是怎么回事,复制在看云上的文档的配置参数时,一直有错误,后台获取不到$_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. 【5min+】为你的.NET应用进行一次全方位体检

    系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...

  2. Youtube推荐算法的前世今生

    第一阶段,基于User-Video图游历算法,2008年[1]. 在这个阶段,YouTube认为应该给用户推荐曾经观看过视频的同类视频,或者说拥有同一标签的视频.然而此时,YouTube的视频已是数千 ...

  3. 关于“xxx”object is not callable的异常

    参考博文:https://blog.csdn.net/yitiaodashu/article/details/79016671 所谓callable对象是指一个后边可以加()的对象,比如函数, 所以这 ...

  4. nginx history路由模式时,页面返回404重定向index.html

    1.路由默认是带#的,有时我们感觉不美观,就使其变为history模式,也就没有#字符 2.# 如果找不到当前页面(404),就返回index.html,重新分配路由 location ^~/prod ...

  5. 算法笔记刷题4(PAT B1009)

    这一题本来不应该有什么问题的,我很快写出来了,在dev c++里面运行也正常.但是放到pat以后出现了问题.更换了c/c++都不行通过编译. #include <cstdio> #incl ...

  6. Prometheus+Grafana 监控 Docker

    cAdvisor (Container Advisor) :用于收集正在运行的容器资源使用和性能信息. https://github.com/google/cadvisor Prometheus(普罗 ...

  7. Solidity的Bytecode和Opcode简介

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

  8. Android Studio常用配置

    目录 1. 主题颜色设置 2. Logcat颜色设置 3. 类注释 4. 编译器添加背景图 4.1 第一种方式 Background Image 4.2 第二种方式 Sexy Editor 5. 修改 ...

  9. Linux系统应用管理:增加普通用户(密码管理等)

    1. 查看当前Linux系统的版本.内核等信息 [root@oldboy ~]# cat /etc/redhat-release CentOS release 6.7 (Final) . # 系统版本 ...

  10. 比特大陆发布终端 AI 芯片 端云联手聚焦安防

    雷帝网 乐天 10月17日报道 比特大陆今日正式发布终端人工智能芯片BM1880,一同发布的还有基于云端人工智能芯片 BM1682 的算丰智能服务器 SA3.嵌入式AI迷你机 SE3.3D 人脸识别智 ...