vue quill-editor 上传图片 upfile 方式 file方式

1.下载quill-editor

	npm install vue-quill-editor

2.全部代码

<template>
  <div>
    <quill-editor
      v-model="this.text"
      ref="myQuillEditor"
      :options="editorOption"
      @change="editorchange"
    />
    <input type="file" @change="change" id="upload" style="display:none;" />
  </div>
</template>
<script>
  import { quillEditor, Quill } from 'vue-quill-editor';
  import { container, ImageExtend } from 'quill-image-extend-module'
  Quill.register('modules/ImageExtend', ImageExtend)
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import axios from 'axios'
  export default {
    components: {
      quillEditor
    },
    props: {
      //此处一定要用value
      articleContent: {
        type: String
      }
    },
    data() {
      return {
        text: '',
        // 富文本框参数设置
        editorOption: {
          modules: {
            ImageExtend: {
              loading: true,  // 可选参数 是否显示上传进度和提示语
              name: 'img',  // 图片参数名
              size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
              action: '',  // 服务器地址, 如果action为空，则采用base64插入图片
              // response 为一个函数用来获取服务器返回的具体图片地址
              // 例如服务器返回{code: 200; data:{ url: 'xxx.com'}}
              // 则 return res.data.url
              response: (res) => {
                console.log(res,'38888888888');
                return data.url
              },
              headers: (xhr) => {},  // 可选参数 设置请求头部
              start: () => {},  // 可选参数 自定义开始上传触发事件
              end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
              error: () => {},  // 可选参数 自定义网络错误触发的事件
              change: (xhr, formData) => {
                console.log(xhr,formData,'46666666666666')
              } // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
            },
            toolbar: {
              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': []}],
                ['clean'],
                [ 'image']],  // container为工具栏，此次引入了全部工具栏，也可自行配置
              handlers: {
                image: function(value) {
                  if (value) {
                    document.querySelector('#upload').click()  // 劫持原来的图片点击按钮事件
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        }
      };
    },
    created() {},
    mounted() {
      this.action = process.env.VUE_APP_imgUpAddress;
      console.log(container,'699999999999999')
    },
    watch: {
      //监听prop传的value，如果父级有变化了，将子组件的myValue也跟着变，达到父变子变的效果
      articleContent(newVal) {
        console.log(newVal)
        this.text = newVal
      },
      //监听myValue，如果子组件中的内容变化了，通知父级组件，将新的值告诉父级组件，我更新了，父级组件接受到值后页就跟着变了
      //参考官网：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
    },
    methods: {
      editorchange(e){
        console.log(e,'7444444444')
        this.$emit('textchange', e)

      },
      change(e) {
        const loading = this.$loading({//加载
          lock: true,
          text: '图片处理中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let _this = this;
        let file = e.target.files[0]
        const formData = new FormData()
        formData.append('upfile', file)//upfile方式
        // formData.append('file', file)file方式
        console.log(file,'777777222222')
        // formData.append('upfile', '0') // 添加form表单中其他数据
        console.log(formData.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        // 添加请求头
        axios.post(this.action, formData, config)
          .then(res => {
            if(res.data.code == 1000){
              let result = res.data.result;
              let quilla = _this.$refs.myQuillEditor.quill;
              let length = 999999;
              quilla.insertEmbed(length, 'image', result.url);
              quilla.setSelection(length+1)
                // const formdata = _.extend({}, this.formdata)
                // let length = quill.getSelection().index//光标位置
                // 插入图片  图片地址
                // 调整光标到最后
                // quill.setSelection(length + 1)//光标后移一位
            }
            loading.close();
          }).catch((err) => {
          //捕捉接口报错后的代码逻辑
          loading.close();

        })
      },
    }
  };
</script>