layui的富文本编辑器如何上传图片,以及后期处理
为什么80%的码农都做不了架构师?>>>
前端页面以及JS如下:
<form class="layui-form" action="" ><textarea name="tweets" id="tweets" style="display: none;"></textarea><script>layui.use('layedit', function(){var layedit = layui.layedit;layedit.build('demo'); //建立编辑器});</script><div class="layui-from-item" style="margin-top: 15px;padding-bottom: 200px;"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="tweets_sub" >提交</button><button type="reset" class="layui-btn-primary layui-btn">重置</button></div></div></form></body>
<script type="text/javascript" src="__PLUGINS__/axios/axios.min.js"></script>
<script>layui.use(['layedit','form'], function(){var form=layui.form;var layedit = layui.layedit;var up_url="{:url('Upload/doup')}";//上传图片urllayedit.set({uploadImage: {url:up_url //接口url,type: 'post' //默认post}});//建立编辑器var index=layedit.build('tweets');form.on('submit(tweets_sub)', function(data){//layer.msg(JSON.stringify(data.field));//获取编辑器的值var tweets_content=layedit.getContent(index);//ajax提交处理axios.post("{:url('Tweets/do_add')}",{"content":tweets_content}).then(function(response){console.log(response);if(response.data.code==1){layer.alert(response.data.msg,{icon:6},function () {window.location.href="{:url('tweets/index')}"});}else{layer.alert(response.data.msg,{icon:5},function(){window.location.reload();});}}).catch(function(error){console.log(error);});return false;});});
</script>
这里和之前我用过的百度的Ueditor不一样,这里是直接上传图片就处理
var up_url="{:url('Upload/doup')}";//上传图片urllayedit.set({uploadImage: {url:up_url //接口url,type: 'post' //默认post} });
处理接口PHP文件如下
<?php
/*** Created by PhpStorm.* User: martinby* Date: 2018/3/5* Time: 23:25*/
//layui的上传类
namespace app\admin\controller;
use think\Controller;
use think\Request;class Upload extends Controller{public function doup(){$file=Request::instance()->file('file');if(empty($file)){$result["code"] = "1";$result["msg"] = "请选择图片";$result['data']["src"] = '';}else{// 移动到框架应用根目录/public/uploads/ 目录下$info = $file->move(ROOT_PATH . 'public/static' . DS . 'uploads' );if($info){$name_path =str_replace('\\',"/",$info->getSaveName());//成功上传后 获取上传信息$result["code"] = '0';$result["msg"] = "上传成功";$result['data']["src"] ="/public/static/uploads/".$name_path;}else{// 上传失败获取错误信息$result["code"] = "2";$result["msg"] = "上传出错";$result['data']["src"] ='';}}return json_encode($result);}}
这个PHP处理文件我也是从网上copy下来,修改了一下
要上传图片必须要在你这里代码指定中的路径去创建uploads文件夹,不然会上传不成功,如果uploads下已经有了你上传的图片,但是显示的图片报错,那么检查一下这个返回的路径是否正确.
转载于:https://my.oschina.net/laobia/blog/1630163
layui的富文本编辑器如何上传图片,以及后期处理相关推荐
- LAYUI 整合富文本编辑器
最近用layui搭一个后台, 在发文章的时候有用到富文本编辑器 ,这里记录一下. 本人用的是 kindeditor富文本编辑器,因为layui自带的富文本感觉功能不是很多. kindeditor 下载 ...
- 基于 Layui 的富文本编辑器和封面的实现方案
文章目录 前言 素材文件 1. 富文本编辑器的实现步骤 1.1 添加 layui 表单行 1.2 导入富文本必须的 script 脚本 1.3 初始化富文本编辑器 2. 图片封面裁剪的实现步骤 2.1 ...
- kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法
[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下 富文本编辑器上传图片 一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...
- vue-quill-editor 富文本编辑器 自定义上传图片
① 安装插件,以及引入插件 使用命令:npm install vue-quill-editor -S ② main.js 中引入 // 导入富文本编辑器 import VueQuillEditor f ...
- vue使用WangEditor富文本编辑器(批量上传图片到服务器)
最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...
- layui.layedit富文本编辑器
点击layui.layedit文档官网教程地址 1.导入layUi框架 [layUi官网下载](https://www.layui.com/)引入layui/dist/css/layui.css和la ...
- 富文本编辑器vue-quill-editor上传图片过大
项目场景: 提示:这里简述项目相关背景: vue_wetland项目中使用富文本编辑器vue-quill-editor完成发表文章模块. 问题描述 提示:这里描述项目中遇到的问题: 在项目中使用富文本 ...
- 小程序(二十五)微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
- vue-quill-editor富文本编辑器自定义上传图片功能
问题描述:vue-quill-editor富文本默认上传图片是将图片转换成base64进行存储,字段过长:然后进行自定义上传图片,只保存图片路径,减少服务器压力 解决思路: 1.先创建一个上传图片的组 ...
最新文章
- robot framework环境搭建(转)
- win7 64位,vs2010(visual studio2010)环境下配置openCV2.4.8版本,以及可能遇到的问题
- SAP UI5 XML view lifecycle processing - defineMasterHeaderFooter
- java配置jndi连接数_JavaWeb:Tomcat下配置数据源(JNDI)连接数据库 | 学步园
- Android笔记 网络源代码浏览器demo
- 还不会用typedef?C语言typedef的详细用法总结,一篇解决你的困惑。(学习笔记2--typedef设置别名)
- vue 数组添加元素_Vue躬行记(3)——样式和表单
- 牛客网暑期ACM多校训练营(第三场): C. Chiaki Sequence Reloaded(数位DP)
- 好用的 curl 抓取 页面的封装函数
- FreeMarker模板导出word报表
- 学云计算能干什么_电大是干什么的?属于什么教育?
- 苹果手机速度慢_安卓日语App,苹果也看进来
- ElasticSearch搜索引擎原理,都给你整理好了
- Python:混合动力汽车能量管理_动态规划简版(2/2)
- 高校圆桌派-第二期直播预告
- OS X EI Captan 中Rootless
- 【CSS随笔】弹性盒子的flex属性
- 来酷科技CEO周铭:以元宇宙生态构建Z时代数字原住民线下体验空间
- 【MyBatis从入门到入土】6 - 关联、集合
- 商票逾期起诉怎么操作