vue-quill-editor富文本--图片上传服务器

最新推荐文章于 2024-02-26 18:32:41 发布

触不到的颜色是否叫彩虹

最新推荐文章于 2024-02-26 18:32:41 发布

阅读量167

点赞数

分类专栏： vue 文章标签： vue 富文本

本文链接：https://blog.csdn.net/qq_28259083/article/details/119387577

版权

本文介绍了在Vue项目中使用vue-quill-editor富文本编辑器时，如何处理图片上传到服务器的问题。针对quill-image-resize-module的imports错误，通过在vue.config.js中配置解决。同时，由于quill-image-drop-module导致的图片重复插入问题，选择放弃使用该模块。转而采用其他方式实现粘贴图片功能，具体实现参考了相关博客文章。

摘要由CSDN通过智能技术生成

组件代码

<template>
	<div>
		<quill-editor v-model="content" ref="quill" :options="editorOption" class="editor">
		</quill-editor>
		<input type="file" @change="onEditorChange" id="upload" style="display:none;" />
	</div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import service from '@/utils/service'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
// import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'

Quill.register('modules/ImageExtend', ImageExtend)
// Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

function uploadImage(file) {
	return service({
		method: 'post',
		// url: `${process.env.VUE_APP_API}/file/post-commit`,
		url: `${process.env.VUE_APP_API}/file/post`,
		data: file, 
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		}
	})
}

function getPageBaseUrl () {
  let baseURL = ''
  if (!window.location.origin) { // 兼容IE，IE11版本下location.origin为undefined
    window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '')
  } else {
    baseURL = window.location.origin
  }
  return baseURL
}

const toolbarOptions = [
	['bold', 'italic', 'underline', 'strike'],
	['blockquote', 'code-block'],
	[{ header: 1 }, { header: 2 }],
	[{ list: 'ordered' }, { list: 'bullet' }],
	[{ script: 'sub' }, { script: 'super' }],
	[{ indent: '-1' }, { indent: '+1' }],
	[{ size: ['small', false, 'large', 'huge