wangEditor富文本编辑器,Laravel上传图片配置和使用
文章目录
- 前言
- 步骤
- 1. 构造好前端模版
- 2. 搭建后端存储
- 3. 调试
前言
由于最近写项目需要使用富文本编辑器,使用的是VUE3.0版本所以很多不兼容,实际测试以后推荐使用wangEditor
步骤
- 构造好前端模版
- 搭建后端存储
- 调试
1. 构造好前端模版
安装模版
模版安装参考:https://www.wangeditor.com/v5/for-frame.html#%E8%B0%83%E7%94%A8-api
上传图片参考:https://www.wangeditor.com/v5/menu-config.html#%E5%9B%BE%E7%89%87

项目代码:
<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div>
</template><script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default {components: { Editor, Toolbar },setup() {// 编辑器实例,必须用 shallowRefconst editorRef = shallowRef()// 内容 HTMLconst valueHtml = ref('<p>hello</p>')// 模拟 ajax 异步获取内容onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'}, 1500)})const toolbarConfig = {}const editorConfig = { placeholder: '请输入内容...',MENU_CONF: {uploadImage:{fieldName: 'images',server: '/api/uploadImage',maxSize: 5 * 1024 * 1024, // 5MB}}}// 组件销毁时,也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例,重要!}return {editorRef,valueHtml,mode: 'default', // 或 'simple'toolbarConfig,editorConfig,handleCreated,}},}
</script>
<style></style>
2. 搭建后端存储
这边使用的是Laravel框架
namespace App\Http\Controllers\Api;use App\Models\ProductTable; // 引入模型
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\Validator;
use Intervention\Image\Facades\Image; // 引入 Intervention Imageclass ProductTableController extends Controller
{public function uploadImage(Request $request){// 验证请求数据$validator = Validator::make($request->all(), ['images' => 'required|image|mimes:jpeg,png,jpg,gif|max:5120', // 图片字段必填,且文件类型、大小需要满足要求]);// 如果验证失败,返回错误信息if ($validator->fails()) {return response()->json(['errno' => 1, // 错误码为 1'message' => 'Validation failed: ' . $validator->errors()->first(),], 422);}try {// 获取上传的文件$file = $request->file('images');// 生成唯一的文件名,防止文件名重复$filename = uniqid() . '.' . $file->getClientOriginalExtension();// 保存图片到 storage/app/public/images 目录,使用生成的文件名$path = $file->store('images', 'public');// 获取完整的文件 URL,包含 IP 地址或域名$url = request()->getSchemeAndHttpHost() . Storage::url($path);// 返回响应,符合要求的格式return response()->json(['errno' => 0, // 错误码为 0,表示成功'data' => ['url' => $url, // 图片 URL'alt' => $filename, // 图片的描述,可以使用文件名作为描述'href' => '', // 图片的链接,可选,暂时为空]], 200);} catch (\Exception $e) {// 捕获异常并返回错误信息return response()->json(['errno' => 1, // 错误码为 1'message' => 'Failed to upload image: ' . $e->getMessage(), // 错误信息], 500);}}
}
注意配置的上传images地址,config/filesystems.php

3. 调试

相关文章:
wangEditor富文本编辑器,Laravel上传图片配置和使用
文章目录 前言步骤1. 构造好前端模版2. 搭建后端存储3. 调试 前言 由于最近写项目需要使用富文本编辑器,使用的是VUE3.0版本所以很多不兼容,实际测试以后推荐使用wangEditor 步骤 构造好前端模版搭建后端存储调试 1. 构造好前端模版 安装模版 模版安…...
chrome源码剖析—进程通信
Chrome 浏览器采用多进程架构(multi-process architecture),这种架构使得每个浏览器标签、扩展、插件、GPU 渲染等都在独立的进程中运行。为了确保不同进程之间的高效通信,Chrome 使用 进程间通信(IPC, Inter-Process …...
JJJ:linux时间子系统相关术语
文章目录 墙上时间内核管理的各种时间无时钟滴答模式(tickless mode 或 no-tick mode)简要介绍具体实现动态时钟滴答 Dynamic Ticks完全无时钟滴答(Full Tickless) nohz sleep单触发模式 oneshot mode 墙上时间 真实世界的真实时…...
0 基础学运维:解锁 K8s 云计算运维工程师成长密码
前言:作为一个过来人,我曾站在技术的门槛之外,连电脑运行内存和内存空间都傻傻分不清,完完全全的零基础。但如今,我已成长为一名资深的k8s云计算运维工程师。回顾这段历程,我深知踏上这条技术之路的艰辛与不…...
大一计算机的自学总结:位运算的应用及位图
前言 不仅异或运算有很多骚操作,位运算本身也有很多骚操作。(尤其后几个题,太逆天了) 一、2 的幂 class Solution { public:bool isPowerOfTwo(int n) {return n>0&&n(n&-n);} }; 根据二进制表示数的原理&#…...
计算机毕业设计Django+Tensorflow音乐推荐系统 机器学习 深度学习 音乐可视化 音乐爬虫 知识图谱 混合神经网络推荐算法 大数据毕设
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
AI 图片涌入百度图库
在这个信息爆炸的时代,我们习惯了通过搜索引擎来获取各种想要的信息和图片。然而,现在打开搜索引擎看到的却是许多真假难辨的信息——AI图片,这部分数据正以惊人的速度涌入百度图库,让小编不禁想问:未来打开百度图库不…...
可爱狗狗的404动画页面HTML源码
源码介绍 可爱狗狗的404动画页面HTML源码,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果 效果预览 源码获取 可爱狗狗的404动画页面HTML源码...
【微服务与分布式实践】探索 Dubbo
核心组件 服务注册与发现原理 服务提供者启动时,会将其服务信息(如服务名、版本、所在节点的网络地址等)注册到注册中心。服务消费者则可以从注册中心发现可用的服务提供者列表,并与之通信。注册中心会存储服务的信息,…...
OpenCSG月度更新2025.1
1月的OpenCSG取得了一些亮眼的成绩 在2025年1月,OpenCSG在产品和社区方面继续取得了显著进展。产品方面,推出了AutoHub浏览器自动化助手,帮助用户提升浏览体验;CSGHub企业版功能全面升级,现已开放试用申请,…...
C++封装红黑树实现mymap和myset和模拟实现详解
文章目录 map和set的封装map和set的底层 map和set的模拟实现insertiterator实现的思路operatoroperator- -operator[ ] map和set的封装 介绍map和set的底层实现 map和set的底层 一份模版实例化出key的rb_tree和pair<k,v>的rb_tree rb_tree的Key和Value不是我们之前传统意…...
二次封装的方法
二次封装 我们开发中经常需要封装一些第三方组件,那么父组件应该怎么传值,怎么调用封装好的组件原有的属性、插槽、方法,一个个调用虽然可行,但十分麻烦,我们一起来看更简便的方法。 二次封装组件,属性怎…...
消息队列篇--通信协议篇--网络通信模型(OSI7层参考模型,TCP/IP分层模型)
一、OSI参考模型(Open Systems Interconnection Model) OSI参考模型是一个用于描述和标准化网络通信功能的七层框架。它由国际标准化组织(ISO)提出,旨在为不同的网络设备和协议提供一个通用的语言和结构,以…...
Python实现U盘数据自动拷贝
功能:当电脑上有U盘插入时,自动复制U盘内的所有内容 主要特点: 1、使用PyQt5创建图形界面,但默认隐藏 2、通过CtrlAltU组合键可以显示/隐藏界面 3、自动添加到Windows启动项 4、监控USB设备插入 5、按修改时间排序复制文件 6、静…...
汇编的使用总结
一、汇编的组成 1、汇编指令(指令集) 数据处理指令: 数据搬移指令 数据移位指令 位运算指令 算术运算指令 比较指令 跳转指令 内存读写指令 状态寄存器传送指令 异常产生指令等 2、伪指令 不是汇编指令,但是可以起到指令的作用,伪…...
DeepSeek理解概率的能力
问题: 下一个问题是概率问题。乘车时有一个人带刀子的概率是百分之一,两个人同时带刀子的概率是万分之一。有人认为如果他乘车时带上刀子,那么还有其他人带刀子的概率就是万分之一,他乘车就会安全得多。他的想法对吗?…...
AI 浪潮席卷中国年,开启科技新春新纪元
在这博主提前祝大家蛇年快乐呀!!! 随着人工智能(AI)技术的飞速发展,其影响力已经渗透到社会生活的方方面面。在中国传统节日 —— 春节期间,AI 技术也展现出了巨大的潜力,为中国年带…...
AI时代的网络安全:传统技术的落寞与新机遇
AI时代的网络安全:传统技术的落寞与新机遇 在AI技术飞速发展的浪潮中,网络安全领域正经历着前所未有的变革。一方面,传统网络安全技术在面对新型攻击手段时逐渐显露出局限性;另一方面,AI为网络安全带来了新的机遇&…...
可以称之为“yyds”的物联网开源框架有哪几个?
有了物联网的发展,我们的生活似乎也变得更加“鲜活”、有趣、便捷,包具有科技感的。在物联网(IoT)领域中,也有许多优秀的开源框架支持设备连接、数据处理、云服务等,成为被用户们广泛认可的存在。以下给大家…...
线程局部存储tls的原理和使用
一、背景 tls即Thread Local Storage,也就是线程局部存储,可在进程内,多线程按照各个线程分开进行存储。对于一些与线程上下文相关的变量,可放到tls中,减少多线程之间的数据同步的开销。 有人可能会问,我…...
新手福音:基于快马平台零基础入门Ubuntu与OpenClaw机器人开发
作为一个刚接触机器人开发的新手,最近在Ubuntu上折腾OpenClaw机器人开发时踩了不少坑。从环境配置到代码调试,每一步都让人头大。不过后来发现了InsCode(快马)平台,简直像找到了救星。今天就把我的学习过程整理成笔记,分享给同样想…...
GIL下的隐性内存竞争:多线程Python服务内存占用翻倍的底层机制(含perf火焰图验证)
第一章:Python 智能体内存管理策略 避坑指南Python 的内存管理看似“全自动”,实则暗藏诸多隐性陷阱——对象引用计数异常、循环引用导致的延迟回收、大对象驻留引发的内存碎片,以及多线程环境下 gc 模块行为不一致等问题,常在高并…...
告别官方文档!用IntelliJ IDEA 2023.3 + Flutter 3.19 搭建环境,我踩过的坑你别再踩了
告别官方文档!用IntelliJ IDEA 2023.3 Flutter 3.19 搭建环境,我踩过的坑你别再踩了 如果你正在寻找一份真正实用的Flutter环境搭建指南,那么你来对地方了。作为一个刚从官方文档和无数博客教程中"幸存"下来的开发者,我…...
Spring AI 2025实战:从零构建企业级智能问答系统
1. 为什么企业需要智能问答系统? 想象一下这样的场景:新员工入职第一天,面对公司庞杂的知识库手足无措;客服部门每天重复回答相同的基础问题;技术团队在查找内部文档时浪费大量时间。这些都是我亲身经历过的痛点&#…...
接口测试--Day5
Pytest是一个流行的测试框架,广泛应用于单元测试、集成测试和功能测试。它具有简单、灵活、可扩展的特点,提供了丰富的功能和插件儿生态系统,它简化了测试的编写和组织拍,通过丰富的功能和简洁的语法,让测试变得容易灵…...
LC_numStream:嵌入式轻量级数字流解析库
1. LC_numStream 库概述:面向嵌入式通信的轻量级数字流解析工具LC_numStream 是一个专为资源受限嵌入式系统设计的纯 C 语言文本数字流解析库。其核心定位并非通用字符串处理,而是解决嵌入式设备在串口、UART、I2C、SPI 或自定义协议通信中高频出现的一类…...
GTE-Base-ZH模型服务监控与运维:使用Prometheus和Grafana
GTE-Base-ZH模型服务监控与运维:使用Prometheus和Grafana 当你把GTE-Base-ZH模型部署上线,开始对外提供服务后,心里是不是总有点不踏实?服务现在运行得怎么样?有没有人用?响应快不快?服务器资源…...
PHP-JWT:PHP 中 JSON Web Tokens 的完整实现指南
PHP-JWT:PHP 中 JSON Web Tokens 的完整实现指南 【免费下载链接】php-jwt 项目地址: https://gitcode.com/gh_mirrors/ph/php-jwt Firebase PHP-JWT 是一个遵循 RFC 7519 标准的 PHP JSON Web Tokens 实现库,提供安全、高效的 JWT 编码和解码功…...
别再用手动执行SQL了!用SpringBoot + Flyway搞定多数据库(MySQL/Oracle/PostgreSQL)的自动化部署
SpringBoot Flyway:多数据库自动化部署的终极解决方案 当你的产品需要同时支持MySQL、Oracle和PostgreSQL三种数据库时,最头疼的问题是什么?是每次部署都要手动执行不同的SQL脚本,还是担心不同环境下数据库结构不一致导致的诡异b…...
Android 应用间文件共享:FileProvider 配置与实战解析
1. 为什么需要FileProvider? 在Android开发中,每个应用都有自己的私有存储空间,这些目录默认是其他应用无法访问的。这种设计保证了应用数据的安全性,但同时也带来了一个问题:当我们需要与其他应用共享文件时该怎么办&…...
