react quill中图片上传由默认转成base64改成上传到服务器的方法


Posted in Javascript onOctober 30, 2019

使用react-quill富文本编辑器,里面处理图片是默认转成base64,提交到后台的时候文件太大,因此这里改写处理image的逻辑,改成上传到服务器。

具体代码如下:

配置1

import Quill from 'quill'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.core.css'
import 'react-quill/dist/quill.snow.css'
import QuillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'

Quill.register({
  'modules/emoji-toolbar': QuillEmoji.ToolbarEmoji,
  // 'modules/emoji-textarea': QuillEmoji.TextAreaEmoji,
  'modules/emoji-shortname': QuillEmoji.ShortNameEmoji
})

const toolbarContainer = [
  [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ 'font': [] }],
  [{ 'header': 1 }, { 'header': 2 }],        // custom button values
  ['bold', 'italic', 'underline', 'strike'],    // toggled buttons
  [{ 'align': [] }],
  [{ 'indent': '-1' }, { 'indent': '+1' }],     // outdent/indent
  [{ 'direction': 'rtl' }],             // text direction
  [{ 'script': 'sub' }, { 'script': 'super' }],   // superscript/subscript
  ['blockquote', 'code-block'],

  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'color': [] }, { 'background': [] }],
  ['emoji', 'image', 'video', 'link'],

  ['clean']
]

配置2

<ReactQuill
  ref={ref => this.quillRef = ref}
  placeholder="填写活动详情~"
  theme="snow"
  value={this.state.detailTpl}
  onChange={this.handleChangeDetail}
  modules={{
    toolbar: {
      container: toolbarContainer,
      handlers: {
        image: this.imageHandler
      }
    },
    'emoji-toolbar': true,
    // 'emoji-textarea': true,
    'emoji-shortname': true,
  }}
/>

图片处理方法

imageHandler = () => {
  this.quillEditor = this.quillRef.getEditor()
  const input = document.createElement('input')
  input.setAttribute('type', 'file')
  input.setAttribute('accept', 'image/*')
  input.click()
  input.onchange = async () => {
    const file = input.files[0]
    const formData = new FormData()
    formData.append('quill-image', file)
    const res = await uploadFile(formData) 
    const range = this.quillEditor.getSelection()
    const link = res.data[0].url

    // this part the image is inserted
    // by 'image' option below, you just have to put src(link) of img here. 
    this.quillEditor.insertEmbed(range.index, 'image', link)
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
JS window.opener返回父页面的应用
Oct 24 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 #Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 #Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 #Javascript
基于JavaScript实现单例模式
Oct 30 #Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 #Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 #Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 #Javascript
You might like
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
Javascript复制实例详解
2016/01/28 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
js中开关变量使用实例
2017/02/24 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
pycharm安装图文教程
2017/05/02 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
政工例会汇报材料
2014/08/26 职场文书
诚实守信演讲稿
2014/09/01 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
指导老师鉴定意见
2015/06/05 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android