Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本

该案例的情况

vue版本：vue cli3插件：vue-quill-editorvue-quill-editor的增强模块：quill-image-extend-module

quill-image-extend-module功能：

提供图片上传到服务器的功能复制插入显示上传进度显示上传成功或者失败

文章目录

一、选择这种方式的来龙去脉（读者可自行跳过）二、实现2.1 安装插件2.2 引入2.3 使用2.3.1 方法一（推荐）2.3.2 方法一延申：不改写方法2.3.3 方法三（不推荐）

一、选择这种方式的来龙去脉（读者可自行跳过）

本意呢，是打算将整个富文本的数据都上传到阿里云服务器上，但是把 Quill 数据封装进 fromData 中上传时，总是报错，报错信息是Required request part 'file' is not present，如下

这个问题应该是前端传参和后台接收参数不一致的问题，和我的后台协商之后，发现并没有什么不妥之处，因为通过 el-upload 上传图片也是通过 formData 数据，是可以成功上传的。研究考虑一番之后，决定放弃此方式，改用存储数据库来实现，将富文本中插入的图片上传服务器、富文本的 html 字符串存储数据库。之所以将图片上传服务器，还有另一个原因，就是如果直接将富文本的 html 字符串存储数据库的话，富文本中插入的图片会以 base64 格式存储，占空间太大；而将图片上传服务器，把返回的图片地址以<img src="http://……" />存入富文本的 html 字符串中，可以大大缩小空间。下面上两张图对比一下

base64 格式：（截图没有截下全部，大概31kb）

图片地址格式：

二、实现

好了，来龙去脉记录完毕，下面开始说说如何实现

2.1 安装插件

npm install vue-quill-editor --save-devnpm install quill-image-extend-module --save-dev

注：在下面的使用过程中，如果出现 modules 里面缺少相关依赖，直接在项目中执行 npm install，就可以

2.2 引入

import {quillEditor, Quill } from 'vue-quill-editor'import {container, ImageExtend, QuillWatch } from 'quill-image-extend-module'Quill.register('modules/ImageExtend', ImageExtend)

2.3 使用

由于是第一次做这个功能，百度了很多，测试了两种方法。下面对这两种方法进行分析

2.3.1 方法一（推荐）

实现思路：使用 quill-editor，通过改写 ImageExtend，进行图片上传、 img 标签改写（将图片地址插入 img 标签）效果：可以实现图片上传服务器、图片地址以 src 方式插入 img 标签并回显在 quill 编辑器内容中

<template><div class="testuploadquillpicandback"><quill-editor @change="onEditorChange($event)"id="desc" ref="quill" v-model="desc" :options="editorOption"></quill-editor></div></template><script>import {quillEditor, Quill } from 'vue-quill-editor'import {container, ImageExtend, QuillWatch } from 'quill-image-extend-module'Quill.register('modules/ImageExtend', ImageExtend)export default{data() {return {desc: '',editorOption: {placeholder: '此处输入赛事规程',modules: {ImageExtend: {loading: true,name: 'file',//图片参数名size: 1, // 可选参数 图片大小，单位为M，1M = 1024kbaction: '/feelings/common/upload/file',//上传的服务器地址，如果action为空，则采用base64插入图片// response 为一个函数，用来获取服务器返回的具体图片地址response: res => {console.log(res)const imgUrl = 'http://' + res.datareturn imgUrl},headers: xhr => {// 上传图片请求需要携带token的 在xhr.setRequestHeader中设置，这里我的token存放在sessionStorage中xhr.setRequestHeader("token", window.sessionStorage.getItem('token'))},// 可选参数 设置请求头部sizeError: () => {}, // 图片超过大小的回调start: () => {}, // 可选参数 自定义开始上传触发事件end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败error: () => {}, // 可选参数 上传失败触发的事件success: () => {console.log('ImageExtend中的success：上传成功')}, // 可选参数 上传成功触发的事件change: (xhr, formData) => {// xhr.setRequestHeader('myHeader','myValue')// formData.append('token', 'myToken')} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData},// 如果不上传图片到服务器，此处不必配置toolbar: {// container为工具栏，此次引入了全部工具栏，也可自行配置container: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{header: 1 }, {header: 2 }],[{list: "ordered" }, {list: "bullet" }],[{script: "sub" }, {script: "super" }],[{indent: "-1" }, {indent: "+1" }],[{direction: "rtl" }],[{size: ["small", false, "large", "huge"] }],[{header: [1, 2, 3, 4, 5, 6, false] }],[{color: [] }, {background: [] }],[{font: [] }],[{align: [] }],["image"]],// 上传成功，回显图片（会进入如上面ImageExtend的各过程，返回<img src="http://xx.xx.xx.xx:xxxx/file/xxx.jpg">）handlers: {image: function() {// 劫持原来的图片点击按钮事件QuillWatch.emit(this.quill.id)}}}}},}},methods: {// quill的change事件onEditorChange(e) {console.log('onEditorChange打印e')console.log(e)}}}</script>

参考自：/dachengzizi/p/11805488.html

2.3.2 方法一延申：不改写方法

实现思路：使用 quill-editor，不改写方法效果：可以实现图片上传，但是返回图片地址为 base64 格式

<template><div class="testuploadquillpicandback"><quill-editor @change="onEditorChange($event)"id="desc" ref="quill" v-model="desc"></quill-editor></div></template><script>import {quillEditor, Quill } from 'vue-quill-editor'import {container, ImageExtend, QuillWatch } from 'quill-image-extend-module'Quill.register('modules/ImageExtend', ImageExtend)export default{data() {return {desc: ''}},methods: {// quill的change事件onEditorChange(e) {console.log('onEditorChange打印e')console.log(e)}}}</script><style></style>

参考自：/bingchenzhilu/p/11951571.html

2.3.3 方法三（不推荐）

实现思路：使用 quill-editor 和 input，重写 ImageExtend，并通过 input 的 change 事件进行上传效果：可以实现图片上传，但是图片地址插入 quill 内较麻烦（我没有尝试去做这个，因为上面方法已经可以满足我的需求，而且更方面管理）

<template><div class="testuploadquillpicandback"><quill-editor @change="onEditorChange($event)"id="desc" ref="quill" v-model="desc" :options="editorOption"></quill-editor>// 实际使用时，可以隐藏以得到更好的体验<input type="file" @change="change" id="upload" /></div></template><script>import {quillEditor, Quill } from 'vue-quill-editor'import {container, ImageExtend, QuillWatch } from 'quill-image-extend-module'Quill.register('modules/ImageExtend', ImageExtend)export default{data() {return {desc: '',editorOption: {placeholder: '此处输入赛事规程',modules: {ImageExtend: {loading: true,name: 'file',//图片参数名size: 1, // 可选参数 图片大小，单位为M，1M = 1024kbaction: '/feelings/common/upload/file',//上传的服务器地址，如果action为空，则采用base64插入图片// response 为一个函数，用来获取服务器返回的具体图片地址response: res => {console.log('ImageExtend中的response')console.log(res)const imgUrl = 'http://' + res.datareturn imgUrl},// 注意：原作者中的res.data和我的不一样，我的res.data=图片地址headers: xhr => {// 上传图片请求需要携带token的 在xhr.setRequestHeader中设置xhr.setRequestHeader("token", window.sessionStorage.getItem('token'))},// 可选参数 设置请求头部sizeError: () => {}, // 图片超过大小的回调start: () => {}, // 可选参数 自定义开始上传触发事件end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败error: () => {}, // 可选参数 上传失败触发的事件success: () => {console.log('ImageExtend中的success：上传成功')}, // 可选参数 上传成功触发的事件change: (xhr, formData) => {} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData},// 如果不上传图片到服务器，此处不必配置toolbar: {// container为工具栏，此次引入了全部工具栏，也可自行配置container: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{header: 1 }, {header: 2 }],[{list: "ordered" }, {list: "bullet" }],[{script: "sub" }, {script: "super" }],[{indent: "-1" }, {indent: "+1" }],[{direction: "rtl" }],[{size: ["small", false, "large", "huge"] }],[{header: [1, 2, 3, 4, 5, 6, false] }],[{color: [] }, {background: [] }],[{font: [] }],[{align: [] }],["image"]],// 进入input的change事件，可以实现上传，但是不能把返回的图片地址插入到quill内容中handlers: {image: function(value) {if (value) {// 劫持原来的图片点击按钮事件，#upload即为自己写的上传，可以使用最简单的inputdocument.querySelector('#upload').click()} else {this.quill.format('image', false)}}}}}},}},methods: {// quill的change事件onEditorChange(e) {console.log('onEditorChange打印e')console.log(e)},// input的change事件：可以实现上传，但是不能把返回的图片地址插入到quill内容中async change(e) {console.log('input的change事件')let file = e.target.files[0]const formData = new FormData()formData.append('file', file)// 下面可以根据后端写的上传接口进行传递参数const {data: res } = await this.$http.post('/feelings/common/upload/file', formData)console.log(res)if (res.code !== 200) {this.$message.error('上传失败')}this.$message.success('上传成功')}}}</script><style></style>

好了，到此为止，两种方式测试完毕，读者可根据自己的需求写适合自己的组件