vue3.2使用@wangeditor/editor-for-vue实现富文本编辑器,后端使用thinkphp上传图片

Vue 组件代码

npm i @wangeditor/editor-for-vue
<template><div style="border: 1px solid #ccc;height:600px;"><Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /><Editor style="height: 500px; overflow-y: hidden;" v-model="editorValueHtml" :defaultConfig="editorConfig":mode="mode" @onCreated="handleCreated" /></div>
</template><script setup lang="ts">
import { ref, Ref, onMounted, onBeforeUnmount, shallowRef, reactive } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()const mode: Ref = ref('default') // 'default' 或 'simple'// editor HTML
const editorValueHtml = ref('<p>hello</p>')
// 工具栏配置
const toolbarConfig = {}// 初始化配置
const editorConfig: any = {MENU_CONF: {}
}editorConfig.placeholder = '请输入内容...'
editorConfig.MENU_CONF['uploadImage'] = {server: '上传图片接口',timeout: 5 * 1000, // 5sfieldName: 'image',// meta: { token: 'xxx', a: 100 },metaWithUrl: false, // join params to urlheaders: { Accept: 'text/x-json' },allowedFileTypes: ['image/*'],maxFileSize: 5 * 1024 * 1024, // 5Mbase64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kbonBeforeUpload(file: any) {console.log('onBeforeUpload', file)return file // will upload this file// return false // prevent upload},onProgress(progress: any) {console.log('onProgress', progress)},onSuccess(file: any, res: any) {console.log('onSuccess', file, res)},onFailed(file: any, res: any) {alert(res.message)console.log('onFailed', file, res)},onError(file: any, err: any, res: any) {alert(err.message)console.error('onError', file, err, res)},
}onMounted(() => {setTimeout(() => {editorValueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'}, 1500)
})// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()
})// 创建实例
const handleCreated = (editor: any) => {editorRef.value = editor // 记录 editor 实例,重要!
}
</script>

thinkphp上传图片接口

<?php
declare (strict_types = 1);namespace app\api\controller;use think\facade\Request;
use think\Validate;class Upload
{public function uploadImage(){// 获取表单上传文件$file = Request::file('image');if ($file) {// 手动验证文件扩展名$validate = new Validate(['ext' => 'jpg,png,gif,jpeg',]);// 获取文件名和扩展名$fileName = $file->getOriginalName();$ext = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));// 验证文件扩展名if (!$validate->check(['ext' => $ext])) {return json(['errno' => 1, 'message' => '文件格式不正确']);}// 定义保存目录$saveDir = './uploads/';  // 将文件保存到 public/uploads 目录// 确保保存目录存在if (!is_dir($saveDir)) {mkdir($saveDir, 0777, true);}// 生成文件的唯一名称,防止文件名重复$uniqueFileName = uniqid() . '-' . $fileName;$savePath = $saveDir . $uniqueFileName;// 移动文件到指定目录if ($file->move($saveDir, $uniqueFileName)) {$url = Request::domain() . '/uploads/' . $uniqueFileName;// 返回图片 URLreturn json(['errno' => 0, 'data' => ['url' => $url]]);} else {// 上传失败获取错误信息return json(['errno' => 1, 'message' => $file->getError()]);}} else {return json(['errno' => 1, 'message' => '没有上传文件']);}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/874566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录解决springboot项目上传图片到本地,在html里不能回显的问题

项目场景&#xff1a; 项目场景&#xff1a;在我的博客系统里&#xff1a;有个相册模块&#xff1a;需要把图片上传到项目里&#xff0c;在html页面上显示 解决方案 1.建一个文件夹 例如在windows系统下。可以在项目根目录下建个photos文件夹&#xff0c;把上传的图片文件…

n9.Nginx 自定义访问日志

Nginx 自定义访问日志 访问日志是记录客户端即用户的具体请求内容信息&#xff0c;而在全局配置模块中的error_log是记录nginx服务 器运行时的日志保存路径和记录日志的level&#xff0c;因此两者是不同的&#xff0c;而且Nginx的错误日志一般只有一 个&#xff0c;但是访问日…

【Pytorch实用教程】pytorch中random_split用法的详细介绍

在 PyTorch 中,torch.utils.data.random_split 是一个非常有用的函数,用于将数据集随机分割成多个子集。这在机器学习和深度学习中非常常见,特别是当你需要将数据集分割成训练集和测试集或验证集时。这里是 random_split 的详细用法介绍: 功能 random_split 用于随机地将…

java面试-场景题

一、集合 1. java中如何给一个超大的一个亿左右的list数据去重&#xff1f; 我当时的回答是使用HashSet或Stream流的distinct语法。但是面试官好像更注重内存的消耗问题。 使用HashSet&#xff1a; HashSet 是一个不允许有重复元素的集合。你可以将List中的元素添加到HashSe…

华为OD2024D卷机试题汇总,含D量50%+,按算法分类刷题,事半功倍

目录 专栏导读华为OD机试算法题太多了&#xff0c;知识点繁杂&#xff0c;如何刷题更有效率呢&#xff1f; 一、逻辑分析二、数据结构1、线性表① 数组② 双指针 2、map与list3、队列4、链表5、栈6、滑动窗口7、二叉树8、并查集9、矩阵 三、算法1、基础算法① 贪心思维② 二分查…

虚拟机固定配置IP

在Hyper-V中&#xff0c;vEthernet (Default Switch) 是Hyper-V自带的默认虚拟交换机&#xff0c;它允许虚拟机直接连接到宿主机网络或外部网络。这个虚拟交换机可以通过Hyper-V管理器或PowerShell等工具进行管理和配置。以下是具体的操作步骤&#xff1a; 一、通过Hyper-V管理…

SAP 贷项销售订单简介

SAP 贷项销售订单简介 1. 什么是销售贷方销售订单?2. 创建销售贷方销售订单的场景3. 销售贷方销售订单的创建流程直接创建发票---VF01将会计凭证过账到会计核算查看贷项销售订单凭证流查看客户明细---FBL5N贷项后台配置SAP销售贷方销售订单(Sales Credit Memo Request)是销售…

Windows定时任务实现关闭和开启声音

目录 1. 下载并放置 nircmd.exe1.1 下载 NirCmd&#xff1a;1.2 放置 nircmd.exe&#xff1a; 2. 定时关闭声音2.1 打开任务计划程序&#xff1a;2.2 创建基本任务&#xff1a;2.3 设置任务名称和描述&#xff1a;2.4 触发器&#xff1a;2.5 操作&#xff1a;2.6 设置程序或脚本…

面试官问:Django、Flask、FastAPI,你选哪个?为什么?

如果你是python Web方向的开发工程师&#xff0c;那么在面试中&#xff0c;会经常遇到面试官问这个问题&#xff1a; “在Python的三个流行Web框架&#xff1a;Django、Flask和FastAPI&#xff0c;说说它们的异同&#xff0c;以及你是怎么选择合适的框架&#xff1f;” 异同对…

AndroidStudio 编辑xml布局文件卡死问题解决

之前项目编写的都是正常&#xff0c;升级AndroidStudio后编辑布局文件就卡死&#xff0c;还以为是AndroidStudio文件。 其实不然&#xff0c;我给整个项目增加了版权声明。所以全部跟新后&#xff0c;布局文件也增加了版权声明。估计AndroidStudio在 解析布局文件时候因为有版…

【目标检测】Anaconda+PyTorch(GPU)+PyCharm(Yolo5)配置

前言 本文主要介绍在windows系统上的Anaconda、PyTorch、PyCharm、Yolov5关键步骤安装&#xff0c;为使用yolo所需的环境配置完善。同时也算是记录下我的配置流程&#xff0c;为以后用到的时候能笔记查阅。 Anaconda 软件安装 Anaconda官网&#xff1a;https://www.anaconda…

Java API和API帮助文档

API:目前是JDK中提供的各种功能的Java类。 简单理解&#xff0c;API就是别人已经写好的东西&#xff0c;我们不需要自己编写&#xff0c;直接用就可以了。比如Random,Scanner....。 Java在设计的时候&#xff0c;将api收入在JDK-API帮助文档中&#xff0c;可直接在API帮助文档…

大数据量级科普

数据量的不同等级可以根据其存储能力的大小进行划分。以下是根据常见的数据存储单位&#xff0c;从低到高列出的数据量等级&#xff1a; 1. KB&#xff08;千字节&#xff09;级 定义&#xff1a;KB是Kilobyte的缩写&#xff0c;即千字节。存储容量&#xff1a;较小&#xff…

ubuntu源码安装Odoo

序言:时间是我们最宝贵的财富,珍惜手上的每个时分 Odoo具有非常多的安装方式&#xff0c;除了我最爱用的 apt-get install&#xff0c;我们还可以使用git拉取Odoo源码进行安装。 本次示例于ubuntu20.04 Desktop上进行操作&#xff0c;理论上在ubuntu14.04之后都可以用此操作。 …

OpenWrt 配置 Tailscale 内网穿透

前言 Openwrt 安装 zerotier 内网穿透. Tailscale 在 OpenWrt 下配置教程参考 GXNAS 博客 的 OpenWrt安装Tailscale设置内网穿透科学出国外网互访局域网设备。啥都不会难搞 的 【傻呱呱】OpenWrt安装Tailscale。阿髙 的 openwrt设置开机自启 tailscale为例。 Tailscale 安…

TensorFlow 1.12函数和注释

TensorFlow 1.12 包含大量的函数和类&#xff0c;覆盖了从基础数学操作到复杂的神经网络层构建的各种功能。列举出部分函数并进行注释。 基础张量操作 tf.add: 张量加法。tf.subtract: 张量减法。tf.multiply: 张量乘法。tf.div: 张量除法。tf.mod: 张量取模。tf.pow: 张量幂…

【算法】一致性哈希

一、引言 在分布式系统中&#xff0c;数据存储和访问的均匀性、高可用性以及可扩展性一直是核心问题。一致性哈希算法&#xff08;Consistent Hashing&#xff09;是一种分布式算法&#xff0c;因其出色的分布式数据存储特性&#xff0c;被广泛应用于缓存、负载均衡、数据库分片…

AI大模型微调训练营-总结

文章目录 AI大模型微调训练营-总结课程总结大模型开发环境搭建(Windows10CUDA12.4T4TorchTransformer)1、安装CUDA2、安装ffmpeg3、安装Anaconda4、安装Torch和Transformer4.1、参考资料4.2、具体安装步骤 AI大模型微调训练营-总结 课程总结 历经2个月&#xff0c;终于初步完…

在浏览器中测试JavaScript代码方法简要介绍

在浏览器中测试JavaScript代码方法简要介绍 在浏览器中测试JavaScript代码是前端开发中的一个重要技能。方法如下&#xff1a; 1. 浏览器控制台 最简单和直接的方法是使用浏览器的开发者工具中的控制台&#xff08;Console&#xff09;。 步骤&#xff1a; 在大多数浏览器…

【CAPL】CAPL 常用语法介绍

CAPL 有 *.can 和 *.cin 两种文件格式&#xff1b;一般.can 文件中写testcase及MainTest()&#xff0c;而.cin文件中写供.can调用的接口方法和变量等&#xff0c;其结构类似于 C 语言中的.c和.h文件 一个大致的结构如下&#xff1a; // Test.cin includes{} variables{int x…