vue-quill-editorのアップロード内容を解決します。画像はbase 64のため、文字が長すぎる問題があります。

vue-quill-editorは比較的軽い級のリッチなテキストボックスで、ueditorよりも、もっと直感的に開発して、より直感的に、もし大伙が許可を必要とする場合は、vue-quill-editorを使うことを勧めます。
vue-quill-editorの使い方はここでは多く言いません。みんなはネットで調べて、ぐっとつかんでください。
しかし、vue-quill-editorを使って致命的な問題があります。vue-quill-editorのデフォルトの挿入画像はそのままbase 64に画像を変えてコンテンツに入れます。画像が大きいと、テキストに富んだ内容が大きくなります。たとえ写真が多くても、長い文章で、テキストに富んでいる内容は異常な大きさです。テキストが豊富な内容を提出する時は、写真は住所だけで提出したいかもしれません。そうすると、どう処理しますか？
まだ古い考えです。写真を直接base 64に変えないでほしいです。選択した画像を使ってサーバーにアップロードします。サーバーは相応のリンクに戻ります。先端は写真をリッチテキストの指定カーソルにリンクしてもいいです。そうすると、私達のほしい効果が実現できます。
まず、リッチテキストコンポーネントQuillEditor.vueを新設し、iviewのアップロードコンポーネントを利用して選択済みの画像をアップロードします（もちろん、他のアップロードコンポーネントもokです）。

<Upload
    id="iviewUp"
     ref="upload"
     :show-upload-list="false"
     :on-success="handleSingleSuccess"
     :format="['jpg','jpeg','png']"
     :max-size="2048"
     :headers="header"
     :on-format-error="handleFormatError"
     :before-upload="handleBeforeUpload()"
     type="drag"
     :action="serverUrl"
     style="display: none;width:0">
     <div style="width: 0">
       <Icon type="ios-camera" size="50"></Icon>
     </div>
   </Upload>
   <!--<Row>-->
    <quill-editor 
     v-model="detailContent" 
     ref="myQuillEditor" 
     :options="editorOption" 
     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
     @change="onEditorChange($event)">
    </quill-editor>
   <!--</Row>-->

上のコードを見たら疑問があります。アップロードした写真はどうやってリッチテキストの指定カーソルの中に差し込むのですか？慌てないでください。パンがあります。下を見てください。

handleSingleSuccess (res, file) {
   // res           
   //          
   let vm = this
   let quill = this.$refs.myQuillEditor.quill
   console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
   //       
   if (res.res_code === '1') {
     //         
     let length = quill.getSelection().index;
     //      res.info           
     quill.insertEmbed(length, 'image', res.result.url)
     //        
     quill.setSelection(length + 1)
   } else {
     vm.$Message.error('      ')
   }
   // loading    
   this.quillUpdateImg = false
  }

カーソル位置をthis.$refs.myQuillEditor.quill.getSelection().indexで取得し、その位置に画像アドレスを置くだけで良いです。
このように準備が整いました。東風だけが欠けています。この時には、iviewというアップロードコンポーネントがページ上にあることを発見します。どうやってリッチテキスト上のアップロード画像をクリックするボタンをクリックして、iviewのアップロードコンポーネントを呼び出す方法を実現しますか？
この時はリッチテキストの構成属性editorOptionを使って、エディットorOptionに画像をアップロードするクリックイベントを対応配置すればいいです。詳細は下記のコードをご覧ください。

 editorOption: { //       
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
       toolbar: {
         container: toolbarOptions, //    
         handlers: {
           'image': function (value) {
 

if (value) {
               document.querySelector('#iviewUp input').click()
             } else {
               this.quill.format('image', false);
             }
           }
         }
       }
     }
   }

 document.querySelector('#iviewUp input') これは対応するdomノードのクリックイベントです。リッチテキストの写真ボタンを押してイベントをクリックすればいいです。やはり比較的簡単です。参考にしてください。
締め括りをつける
以上述べたのは小编が皆さんに绍介したvue-quill-editorのアップロード内容です。画像はbase 64のために、文字が长すぎて、皆さんの助けになりたいです。もし何かご质问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。