Element UI vue-quill-editor 上传图片完整代码

以下是使用Element UI和vue-quill-editor实现上传图片的完整代码：

1. 安装需要的依赖：

npm install element-ui vue-quill-editor axios -S

2. 在main.js中引入依赖并注册组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import App from './App.vue'
import axios from 'axios'

Vue.prototype.$axios = axios
Vue.use(ElementUI)
Vue.use(VueQuillEditor)

new Vue({
  el: '#app',
  render: h => h(App)
})

3. 在需要使用富文本编辑器的组件中，添加以下代码：

<template>
  <div>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['blockquote', 'code-block'], // 引用，代码块
            ['link', 'image', 'video'], // 链接，图片，视频
            ['clean'] // 清除字体样式
          ],
          // 上传图片
          imageUploader: {
            upload(url, fd) {
              return new Promise((resolve, reject) => {
                this.$axios.post(url, fd).then(res => {
                  resolve(res.data.data)
                }).catch(err => {
                  reject(err)
                })
              })
            },
            format(res) {
              return res.data.url
            }
          }
        }
      }
    }
  }
}
</script>

注：这里的上传图片使用了axios，需要在使用前先引入并设置Vue.prototype.$axios = axios

这样就可以使用Element UI和vue-quill-editor实现上传图片功能了。