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

vue版本：vue cli3

插件：vue-quill-editor

插件增强模块：quill-image-extend-module

quill-image-extend-module功能:提供图片上传到服j务器的功能(复制插入,显示上传进度,显示上传成功或者失败)

1:安装插件

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

2:引入

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

实现思路：使用 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 = 1024kb
							action: '/feelings/common/upload/file',//上传的服务器地址，如果action为空，则采用base64插入图片
							// response 为一个函数，用来获取服务器返回的具体图片地址
							response: res => {
								console.log(res)
								const imgUrl = 'http://' + res.data
								return 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>