一、上传图片的base64

这种方法会把base64存入数据库，图片小还可以，稍微大一点（10M以上），数据库就存不上了，所以只能练习使用。

源码：

<template lang="html"><div><div ref="editor1"></div></div>
</template><script>
//引入
import wangEditor from 'wangeditor'
import {request} from "../../network/request";
export default {name: 'editoritem',props:{element:{},},data() {return {//这个为富文本编辑器editor: null,//这个为富文本的内容editorData: '',haven:1}},beforeCreate() {const editor = new wangEditor(this.$refs.editor1)editor.config.uploadImgShowBase64 = true  // 转64方法,富文本中存入的是base64editor.config.onchange = (newHtml) => {this.editorData = newHtmlthis.$store.state.richtext = this.editorData}// 创建编辑器editor.create()this.editor = editor}},beforeDestroy() {vue需要的 调用销毁 API 对当前编辑器实例进行销毁this.editor.destroy()this.editor = null},
}
</script>
<style scoped>
</style>

过程:

看这里图片的src为base64

数据库中存入了base64

注意要用Longblob,否者可能图片太大存不进数据库

上传请求就是普通的post封装后的请求

request({url:'/efile/addEFile.dao',data:{nId:0,fileName:this.file.fileName,filePath:this.$store.state.richtext},}).then(res => {console.log(res);if (res.data.code == 200){this.$message('上传成功')}else {this.$message('上传失败')}}).catch(err => {this.$message('请求或网络异常')})

import axios from "axios"export function request(config){const require = axios.create({method:config.method || 'post',baseURL:'/api/ebook/lan',timeout:10000,headers:config.method ||{'Content-Type': 'application/json;charset=utf-8'},data:config.data,withCredentials:true})return require(config)
}

封装完成的模板在这：(106条消息) vue项目模板.zip-Javascript文档类资源-CSDN文库https://download.csdn.net/download/progrmmmm/43079878

这种方法用作练习,因为没有人会把图片直接存进数据库里,一般存的都是数据库中存储这张图片的路径，服务器中存储文件。

二、自己配置接口服务器存图片（需求只能连接内网情况）

有的需求是只有内网电脑不能连接外网的，所以就不能用阿里的服务器，只能存在本地服务器中，也就是硬盘中。

我在这里将wangeditor封装成了组件,上面那个也封装成了组件但是就不细说了,因为上面那个不常用,这里简单说一下思路:点击按钮创建富文本,上传成功或者点击取消后销毁富文本【wangeditor用在vue上时一定要注意销毁和创建】详细的注释都在代码段中。

父组件：

<template><div><button type="text" @click="addClick" class="addBtn">添加</button><el-dialog title="数据添加" :visible.sync="dialogFormVisible" width="600px" @closed="boom" :close-on-click-modal="false"><el-form :model="nodeName" ref="nodeName"><el-form-item  prop="fileName" label="文件名:" :label-width="formLabelWidth"><el-input type="fileName" autocomplete="off" placeholder="请输入" v-model="file.fileName"></el-input></el-form-item><el-form-item><wang-enduit ref="editor"/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="addFileBtn">确 定</el-button></div></el-dialog></div>
</template><script>
import {request} from "../../../network/request";//封装的axios.create请求上面的连接是模板
import wangEnduit from '../../wangEnduit/index'//富文本子组件export default {name: "dataAdd",components:{//注册组件wangEnduit},data(){return{dialogFormVisible:false,formLabelWidth: '120px',// file:[],nodeName:'',file:{fileName:'',filePath:''}}},methods:{boom(){this.$refs.editor.editors()//点击事件创建富文本},cancel(){this.dialogFormVisible = false// this.fileName = ''this.nodeName.name = ''},//用于上传内容后清空内容的方法addFileBtn(){if(this.file.fileName.length === 0){this.$message('请输入文件名')}else {this.dialogFormVisible = falserequest({url:'/efile/addEFile.dao',//存储富文本的接口data:{nId:0,fileName:this.file.fileName,filePath:this.$store.state.richtext},}).then(res => {console.log(res);}).catch(err => {this.$message('请求或网络异常')})}},addClick(){this.dialogFormVisible = truesetTimeout(() => {//需要在创建富文本之前创建组件,所以延时一下,先让组件创建成功再创建富文本this.$refs.editor.creat()},100)}}
}
</script><style scoped>
.addBtn{width: 80px;height: 30px;background-color:#7EC0EE;border-radius: 0;border-width: 0;color: #FFFFFF;font-size: 12px;margin: 15px 0 15px 30px;
}
.upload{width: 400px;height: 90px;border: solid 1px #EBEBEB;
}
.uploadFile{width: 400px;height: 90px;opacity: 0;
}
.fileNameShow{position: absolute;top: 5px;left: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:350px;
}
</style>

富文本组件[关键看这里,上面只是把已经存到服务器的图片路径录入数据库而已]：

<template lang="html"><div><div ref="editor1"></div></div>
</template><script>
//引入
import wangEditor from 'wangeditor'
import {request} from "../../network/request";export default {name: 'editoritem',props:{element:{},},data() {return {//这个为富文本编辑器editor: null,//这个为富文本的内容editorData: '',haven:1}},beforeCreate() {},methods:{creat(){console.log("创建")//判断哪个id或者class的div为富文本编辑器const editor = new wangEditor(this.$refs.editor1)editor.config.uploadImgShowBase64 = true  // 转64editor.config.uploadImgServer = 'http://localhost:8020/ebook/lan/eimg/addEImg.dao'  // 图片要存的服务器接口editor.config.showLinkImg = false//禁止上传网络图片editor.config.customUploadImg =  (resultFiles, insertImgFn) => {let formData = new FormData()formData.append('files', resultFiles[0])//把除了图片也要上传的数据放入formdataformData.append('nId',0)request({method: 'post',//上传方法url: '/eimg/addEImg.dao',headers: {'Content-Type': 'multipart/form-data'},data: formData}).then(res => {console.log(res)if (res.data.code === 200) {insertImgFn(res.data.data)//让上传上去的图片展示在富文本中}})}//菜单,包括顺序editor.config.menus = ['head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list','justify',// 'quote',// 'emoticon','image',// 'video',// 'table',// 'code','splitLine','undo','redo',]// 配置 onchange 回调函数，将数据同步到 vue 中editor.config.onchange = (newHtml) => {this.editorData = newHtml}// 创建编辑器editor.create()this.editor = editor},editors(){this.editor.destroy()//销毁组件this.editor = nullconsole.log('销毁')}},
}
</script>
<style scoped>
</style>

axios封装:

import axios from "axios"export function request(config){const require = axios.create({method:config.method || 'post',baseURL:'/api/ebook/lan',//换你自己的,可能也有跨域问题,看我主页的跨域怎么改timeout:10000,headers:config.method ||{'Content-Type': 'application/json;charset=utf-8'},data:config.data,withCredentials:true})return require(config)
}

样式：

结果:

存储富文本:

存储路径:

因为前后端代码不一样,所以在你的环境不一定能成功,关键是看好方法自己封装。

三、上传到阿里云或者其他服务器（需求可以连接外网情况）

（1）上传自己的后端代码给阿里云，然后存储图片。

（2）直接上传到阿里云的oos。

这两点交给后端就行了，前端也就换个接口就行了。

阿里云oss图片服务器-阿里云oss图片服务器文档介绍内容-阿里云 (aliyun.com)

wangEditor自定义一个图片上传相关推荐

一步一步搭建一个图片上传网站（后台服务器用nodejs）
前几天看了腾讯云社区的一个文件上传的文章 <文件上传那些事儿> ,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试.也没有具体的一个实例都是一些基本的原 ...
一步一步搭建一个图片上传网站（后台服务器用nodejs） 1
前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试.也没有具体的一个实例都是一些基本的原理片段,并且ui界面 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
*使用quill富文本编辑器的插件，自定义formData图片上传
官网地址:https://quilljs.com 项目需求:自带的上传图片是base64,直接入库的话,请求头太长,导致网页十分十分的卡,所以才改用formData自定义上传(改完之后,相当于覆盖了他 ...
关于V5.7 正式版自定义字段图片上传无法点击选择的问题解决！
官方说官方的版本已经更改了,坐等下次更新,我不知道官方会在什么时候更新,在没更新期间那用户怎么办,因此,我花了近一个上午来找这个问题的解决办法再来看一下打开浏览按纽后对话框的上面的地址 V57上面是 ...
简单的做一个图片上传预览（web前端）
在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: 代码: <!DO ...
用react写一个图片上传（或文件上传）
<Upload{...actionprops} >{ systemOne ? systemOne.imgUrl ? <img src={systemOne.imgUrl} alt=& ...
SSM开发书评网29：后台二：wangEditor图片上传；（主要内容是【wangEditor图片上传的文档要求】，【Spring MVC整合FileUpload组件，以实现文件上传功能】）
说明: (1)本篇博客内容说明:[在后台系统,我们点击新增按钮后,会弹出新增图书对话框]→[该对话框中,包含一个wangEditor富文本编辑器]→[wangEditor富文本编辑器中,可以包含图片] ...
自定义vue组件--实现多图片上传
一引入文件上传在日常的开发中是一项基本的操作,在前端中得以广泛的使用,因此将其封装成一个组件显得极为重要,本文主要是基于vue实现的自定义多图片上传组件. 二自定义vue上传组件 MultiUp ...

wangEditor自定义一个图片上传

一、上传图片的base64

二、自己配置接口服务器存图片（需求只能连接内网情况）

三、上传到阿里云或者其他服务器（需求可以连接外网情况）

wangEditor自定义一个图片上传相关推荐

最新文章

热门文章