vue-quill-editor+element-ui 自定义图片上传

背景： 产品但愿在富文本中

1. 能够截图上传
2. 复制粘贴文件上传
3. 点击上传

公司用的富文本编辑器采用的是vue-quill-editor，

也找了一些富文本编辑器，其实都不太好用，还不如用这个。

vue-quill-editor支持自定义处理程序，因此在点击图片上传icon时，会有一个回调

关键代码：

options: {
       placeholder: '请输入内容',
       theme: 'snow',
       modules: {
         toolbar: {
           container: toolbarOptions,
           handlers: {
             ['image'](value) {
               if (value) {
                 document.querySelector('.uploader input').click();
               } else {
                 this.myQuillEditor.format('image', false);
               }
             }
           }
         }
       }
     }
复制代码

其实就是经过这个唤起饿了么的图片上传组件来触发真正的图片上传行为。

template代码:

<file-upload
     v-show="false"
     @on-success="onSuccess"
     @on-start="onStart"
   >
 </file-upload>
复制代码

由于须要element-ui上传图片的组件配合，可是又不须要其显示在界面上，因此能够直接让其隐藏，经过document.querySelector('.uploader input').click();触发点击事件，剩下的就是把图片传给服务器的事情了。

再经过on-success就能拿到上传后的图片资源了。

关于截图和复制粘贴文件怎么显示在富文本，

关键代码：

document.addEventListener('paste', event => {
       // 兼容问题
       if (event.clipboardData || event.originalEvent) {
         const clipboardData =
           event.clipboardData || event.originalEvent.clipboardData;

         if (clipboardData.items) {
           let items = clipboardData.items;
           let blob = null;
           // 阻止默认行为
           event.preventDefault();
          
           for (let i = 0; i < items.length; i++) {
             if (items[i].type.indexOf('image') !== -1) {
               blob = items[i].getAsFile();
             }
           }
           if (blob !== null) {
             const reader = new FileReader();

             reader.onload = event => {
               // event.target.result 即为图片的Base64编码字符串
               const base64Str = event.target.result;
               // 直接将base64编码的字符串上传
               this.uploadImage(base64Str);
             };

             reader.readAsDataURL(blob);
           }
         }
       }
     });
复制代码

经过监听paste就能得到处理，最终得到base64编码的图片数据，而后一切照旧，传给服务器就好了。

注意，只兼容chrome。