zx-quill+vue+element实现富文本图片上传到服务器

quill富文本编辑器图片默认是base64数据流，我们要实现把图片上传到服务器这个需求，quill中并没有找到相关配置

https://www.jianshu.com/p/9e4e4d955d0f
感谢作者给我灵感—用隐藏的input上传组件来实现自定义上传事件

cnpm install zx-quill 

下载安装相关依赖

因为项目本身自带富文本，我们二次封装即可，这是vabQuill.js

import 'zx-quill/dist/zx-quill.css'
import VabQuill from 'zx-quill'
export default VabQuill

将二次封装的富文本提取成公共组件

<template>
  <div>
     <el-upload
  class="avatar-uploader"
  :action='upLoadUrl'
  :show-file-list="false"
  :headers='headers'
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
    <vab-quill
          ref="QuillEditor"
          v-model="content"
          :min-height="300"
          :options="options"
          @change="onEditorChange($event)"
        ></vab-quill>
  </div>
</template>

<script>
import vabQuill from '@/plugins/vabQuill'
  import {baseURL} from '@/utils/baseUrl'
  export default {
    components: {
      vabQuill
    },
    data(){
        return{
        headers:{token:sessionStorage.getItem('token')},
        content:'',
        // 富文本的配置
        options: {
          theme: 'snow',
          bounds: document.body,
          debug: 'warn',
          modules: {
             toolbar: {
               container:[
              ['bold', 'italic', 'underline', 'strike'],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ size: ['small', false, 'large', 'huge'] }],
              [{ color: [] }, { background: [] }],
              ['blockquote', 'code-block'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }],
              [{ indent: '-1' }, { indent: '+1' }],
              [{ align: [] }],
              [{ direction: 'rtl' }],
              [{ font: [] }],
              ['clean'],
              ['link', 'image']
            ],
            handlers: {
                        'image': function (value) {
                            if (value) {
                                // 调用element图片上传
                                document.querySelector('.el-upload').click()
                            } else {
                                this.quill.format('image', false);
                            }
                        }
                    }
            }
          },
          placeholder: '内容...',
          readOnly: false,
          imageUrl:'',
          image:''
        },
        // 图片上传路径
        upLoadUrl:baseURL+'/manage/upload_file',
        }
    },
    mounted(){
        
    },
    methods:{
        // 获取富文本的内容
        showChild(e){
            this.content=e;
        },
        // 上传组件获得的图片地址反渲染近富文本中
        handleSuccess (res) {
        // 获取富文本组件实例
        let quill = this.$refs.QuillEditor.Quill;
        // 如果上传成功
        if (res) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res)
            // 调整光标到最后
            quill.setSelection(length + 1)
        } else {
            // 提示信息，需引入Message
            Message.error('图片插入失败')
        }
    },
    handleAvatarSuccess(res, file) {
        this.image=res.url;
        this.handleSuccess(res.url)
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
.avatar-uploader{
    display: none;
}
</style>

到此，我们的功能就实现了，思路非常巧妙，将element中的upload隐藏，手动触发相关事件，再通过quill.getSelection()获取光标所在位置

标签：vue,res,image,element,zx,file,文本,上传,quill
来源： https://blog.csdn.net/weixin_42738504/article/details/120314205