quill自定义图片上传

quill是个不错的富文本编辑器，但是它的图片上传是直接将本地图片读成base64跟文本混合在一起，这显然不适合一般开发需求，我们希望插入的是一个图片url，故这里将基于vue.js实现quill的图片上传功能。

没有什么好说的，直接贴代码

quillEditor.vue

<template><div><quilleditor v-model="content"ref="myTextEditor"                :options="editorOption"                @change="onChange">            <div id="toolbar" slot="toolbar">           <span class="ql-formats"><button type="button" class="ql-bold"></button></span>        <span class="ql-formats"><button type="button" class="ql-italic"></button></span>        <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>        <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>        <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>        <span class="ql-formats"><button type="button" class="ql-link"></button></span>        <span class="ql-formats">        <button type="button" @click="imgClick" style="outline:none">        <svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>      </button>      </span>      <span class="ql-formats"><button type="button" class="ql-video"></button></span>         </div>  </quilleditor></div></template><script>import {quillEditor} from 'vue-quill-editor'export default {    props:{      value:{        type:String      },      /*上传图片的地址*/      uploadUrl:{        type:String,        default:'http://localhost/test/upload.php'      },      /*上传图片的file控件name*/      fileName:{        type:String,        default: 'upload_file'      }    },    data() {      return {        content: '',        editorOption: {          modules: {            toolbar: '#toolbar'          }        },      }    },    methods: {      onChange(){        this.$emit('input', this.content)      },      /*选择上传图片切换*/      onFileChange(e){        var self=this        var fileInput=e.target        if(fileInput.files.length==0){          return        }        this.editor.focus()        if(fileInput.files[0].size>1024*1024*100){          this.$alert('图片不能大于600KB', '图片尺寸过大', {            confirmButtonText: '确定',            type: 'warning',          })        }        var data=new FormData        data.append(this.fileName,fileInput.files[0])        this.axios.post(this.uploadUrl,data).then(function(res){          if(res.data) {            self.editor.insertEmbed(self.editor.getSelection().index, 'image', res.data.url)          }        })      },      /*点击上传图片按钮*/      imgClick() {        if(!this.uploadUrl){          console.log('no editor uploadUrl')          return;        }        /*内存创建input file*/        var input=document.createElement('input')        input.type='file'        input.name=this.fileName        input.accept='image/jpeg,image/png,image/jpg,image/gif'        input.onchange=this.onFileChange        input.click()      }    },    computed:{      editor() {        return this.$refs.myTextEditor.quill      }    },    components: {      'quilleditor': quillEditor    },    mounted(){      this.content=this.value    },    watch:{      'value'(newVal, oldVal) {        if (this.editor) {          if (newVal !== this.content) {            this.content = newVal          }        }      },    }  }</script>

图片上传地址改成自己的

我在main.js里引入了axios，所以这里可以直接使用this.axios，根据你的配置做适当调整即可

最后感谢这位大神的分享：vue-quill-editor自定义图片上传