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

2021-09-15 18:30:08 阅读：291 来源： 互联网

标签：vue res image element zx file 文本上传 quill

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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