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，根據你的配置做適當調整即可