富文本编辑器图片上传并回显

server/2024/11/29 8:10:03/

1.概述

在代码业务需求中,我们会经常涉及到文件上传的功能,通常来说,我们存储文件是不能直接存储到数
据库中的,而是以文件路径存储到数据库中;但是存储文件的路径到数据库中又会有一定的问题,就是
浏览器是不能直接访问我们的本机的文件资源的;即便我们通过别的技术手段可以让浏览器访问本地资
源,那也是不安全的,基本上不会使用这样的手段;我们一般是把资源上传到服务器中。

2.使用步骤(纯前端上传版)

这里使用的富文本编辑器是 wangEditor ,且这里使用的是华为云的云存储技术 OBS ;本项目不打算做后
端连接,只是演示如何使用文件上传功能,想使用后端连接的小伙伴可以直接创建一个后端项目,只需
创建一个接口和一个接口参数便即可接收到前端的富文本编辑器的内容。

2.1 创建vue项目

vue 项目同学们基本上都会创建了,这里就不做过多的赘述

2.2创建一个页面,开始编辑页面

查看官方文档: 快速开始 | wangEditor
安装 npm install @wangeditor/editor --save npm install @wangeditor/editor
for-vue@next --save
复制粘贴 Demo 的代码即可完成富文本编辑器的编辑
在本项目中,我比较喜欢 vue3 的组合式语法,所以和官网的代码略有不同
<template>
<h2 style = "margin-left: 10vw" > 这是富文本编辑器 1 </h2>
<div class = "editView1" >
<div style = "height: 90%;border: 1px solid #ccc" >
<Toolbar
style = "border-bottom: 1px solid #ccc"
:editor = "editorRef"
:defaultConfig = "toolbarConfig"
:mode = "mode"
/>
<Editor
style = "height: 90%; overflow-y: hidden;"
v-model = "valueHtml"
:defaultConfig = "editorConfig"
:mode = "mode"
@onCreated = "handleCreated"
/>
</div>
<el-button> 点击提交 </el-button>
</div>
<h3 style = "margin-left: 10vw" > 这是提交到数据的文本内容 </h3>
<div style = "margin-top: 10px;width: 80vw;margin-left: 10vw;border: 1px solid" >
<p> {{valueHtml}} </p>
</div>
</template>
<script setup >
import '@wangeditor/editor/dist/css/style.css' ;
import { onBeforeUnmount , ref , shallowRef , onMounted } from 'vue' ;
import { Editor , Toolbar ,} from '@wangeditor/editor-for-vue' ;
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef ()
// 内容 HTML
const valueHtml = ref ( '<p>hello</p>' )
const toolbarConfig = {}
const editorConfig = {
placeholder : ' 请输入内容 ...' ,
}
// 组件销毁时,也及时销毁编辑器,也是一直进行触发
onBeforeUnmount (() => {
const editor = editorRef . value
if ( editor == null ) return
editor . destroy ()
})
const handleCreated = ( editor ) => {
editorRef . value = editor // 记录 editor 实例,重要!
}
</script>
<style scoped >
.editView1 {
width : 80vw ;
height : 50vh ;
margin-left : 10vw ;
}
</style>

2.3编辑图片上传功能

上面代码是没有文件上传的功能的,这个功能是需要我们自己添加的

先去官方文档找到菜单编辑部分: 菜单配置 | wangEditor
看到我圈的地方,将该代码添加到对应的地方
const editorConfig = {
placeholder: ' 请输入内容 ...',
MENU_CONF: {}
}

 在跳转到官方文档找到上传图片部分:菜单配置 | wangEditor

script代码块中,继续向后添加内容,里面就可以写上我们的上传图片的的相关代码

editorConfig.MENU_CONF['uploadImage'] = {
// 上传图片的配置
}
但不过我的项目中使用的是华为云存储技术,和同学们的可能有点出入,所以以下代码仅供参考,不能
直接复制粘贴使用
// 创建云存储的实例对象
var obsClient = new ObsClient({
access_key_id: " 填写 ak 密钥 ",
secret_access_key: " 填写 sk 密钥 ",
// 这里以我自己的访问路径为例,其他的话请按实际情况填写
server: 'https://obs.cn-north-4.myhuaweicloud.com'
});
// 自定义图片上传
editorConfig.MENU_CONF['uploadImage'] = {
async customUpload(file, insertFn) { // JS 语法
// file 即选中的文件 , 先上传对象文件
obsClient.putObject({
Bucket: 'beixuan',
Key: file.name,
SourceFile: file
}, function (err, result) {

if(err){

// 上传失败
console.error('Error-->' + err);
}else{
// 最后回显图片
// 自己实现上传,并得到图片 url alt href
var url = "https://beixuan.obs.cn-north-4.myhuaweicloud.com/"+file.name
var alt = file.name
var href = "https://beixuan.obs.cn-north-
4.myhuaweicloud.com/"+file.name
insertFn(url,alt,href)
}
});
}
}

 3.使用步骤(后端上传版)

3.1 界面创建还是上面的步骤只不过自定义上传的方法不同

// 自定义图片上传
editorConfig.MENU_CONF['uploadImage'] = {
// 自定义上传
async customUpload(file, insertFn) { // JS 语法
const formData = new FormData();
formData.append('image', file);
try {
const response = await axios.post('/UploadToWeb/upload/image', formData);
console.log(response)
if (response.errno == 0){
console.log(response.data)
insertFn(response.data.url, response.data.alt, response.data.href)
}
} catch (error) {
console.error('Error uploading file:', error);
}
// file 即选中的文件
// 自己实现上传,并得到图片 url alt href
// 最后插入图片
}

 3.2 创建后端程序(无数据库连接)

java">@RestController
@RequestMapping("/upload")
public class UploadController {
@RequestMapping("/image")
public ResultJSON uploadImage(@RequestParam("image") MultipartFile file){
//直接在代码中指定路径(不推荐,因为硬编码的路径不灵活)
String uploadDir = System.getProperty("catalina.base") + File.separator +
"webapps" + File.separator + "UploadToWeb" + File.separator + "image";
try {
// 确保上传目录存在
File uploadDirectory = new File(uploadDir);
if (!uploadDirectory.exists()) {
uploadDirectory.mkdirs();
}
// 构建目标文件路径
String fileName = file.getOriginalFilename();
// 这里你可以添加逻辑来避免文件名冲突或路径遍历攻击
File destFile = new File(uploadDirectory, fileName);
// 保存文件
file.transferTo(destFile);
ResData data = new ResData();
data.setUrl("http://192.168.78.132:8080/UploadToWeb/image/"+destFile.getName());
data.setAlt(fileName);
data.setUrl("http://192.168.78.132:8080/UploadToWeb/image/"+destFile.getName());
return ResultJSON.ok(data);
} catch (IOException e) {
e.printStackTrace();
return ResultJSON.err("系统错误,上传失败");
}
}
}

3.3 跨域解决

export default defineConfig({
plugins: [vue(),],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
//前端代理进行跨域决解问题
server:{
proxy:{
'/api':{ //将路径中含有api的路径就会进来到这里
changeOrigin:true, //是否切换源
target:"http://192.168.78.132:8080/", //确定切换源后需要切换成哪一
个源
rewrite:(path) => path.replace(/^\/api/,'') //是否重写路径,重写成什么路径
//上面表示说重写路径时,由于后端的接口中除了没有/api这个部分外,其他的的一样,所以
把'/api'替换成空字符串就是一样的了
}
}

 3.4 打包成war包及部署到tomcat服务器上


http://www.ppmy.cn/server/145848.html

相关文章

【论文阅读】Learning to Learn Task-Adaptive Hyperparameters for Few-Shot Learning

学习任务自适应超参数以实现小样本学习 引用&#xff1a;Baik, Sungyong, et al. “Learning to learn task-adaptive hyperparameters for few-shot learning.” IEEE Transactions on Pattern Analysis and Machine Intelligence 46.3 (2023): 1441-1454. 论文地址&#xff1…

Python爬虫爬取网页小说

分析 注意&#xff1a;不同小说url不同&#xff0c;不同小说需采用的正则也不同 1.安装requests包 pip install requests2.导入必要的库 re模块用于进行正则表达式相关的操作&#xff0c;比如使用正则表达式在获取到的网页文本内容中匹配提取特定格式的信息。 resquests模块用…

Python学习35天

# 定义父类 class Computer: CPUNone MemoryNone diskNone def __init__(self,CPU,Memory,disk): self.disk disk self.Memory Memory self.CPU CPU def get_details(self): return f"CPU:{self.CPU}\tdisk:{self.disk}\t…

C语言蓝桥杯组题目

系列文章目录 文章目录 系列文章目录前言题目第一题.1, 2, 3, 4 能组成多少个互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f;第二题: 一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上168又是一个完全平方数&#xff0c;请问该数是多少&…

css3弹性布局

CSS3的弹性布局&#xff08;Flexbox&#xff09;是一种强大的布局模式&#xff0c;用于创建灵活且响应式的布局结构。它使得容器内的项目能够更智能地分配空间&#xff0c;并且可以轻松调整它们的对齐方式。下面是一些关键概念和示例代码来帮助你更好地理解和使用Flexbox。 基…

【Linux网络编程】第二弹---Socket编程入门指南:从IP、端口号到传输层协议及编程接口全解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【Linux网络编程】 目录 1、Socket 编程预备 1.1、理解源 IP 和目的 IP 1.2、认识端口号 1.2.1、端口号范围划分 1.2.2、理解 &q…

React Native 性能调试指南

写在前面 在开发 React Native 应用时&#xff0c;性能优化是一个至关重要的环节。良好的性能不仅可以提升用户体验&#xff0c;还能减少应用的资源消耗&#xff0c;提高应用的稳定性。本文将详细介绍如何对 React Native 应用进行性能调试和优化&#xff0c;包括性能综述、编…

作业3-基于pytorch的非线性模型设计

一、任务描述 使用BP神经网络和CNN实现对MNITS数据集的识别&#xff0c;并通过修改相关参数&#xff0c;比较各模型的识别准确率。 二、相关配置 pytorch&#xff1a;2.5.1 python&#xff1a;3.12 pycharm&#xff1a;2024.1.2&#xff08;这个影响不大&#xff0c;版本不要太…