vue-quill-editor 自定义上传图片

最新推荐文章于 2025-09-10 01:26:47 发布

原创

最新推荐文章于 2025-09-10 01:26:47 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue-quill-editor

本文介绍如何在使用 Vue-quill-editor 的情况下，将原本转换为 base64 的图片上传到服务器，从而使用服务器返回的 URL。首先通过 npm 安装组件，然后导入并应用样式。接着引入 VueQuillEditor 并配置自定义图片上传功能。

基本运用 https://blog.youkuaiyun.com/div_ma/article/details/79536634

自带的上传图片是转base64 现在需要就图片上传到服务器使用url地址

1. npm 安装 vue-quill-editor

2. import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

<template>
  <div style="text-align: left">
    <button @click="browse">浏览</button>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>