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。