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 相关文章推荐
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jquery编写日期选择器
2017/03/16 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
图解Python变量与赋值
2018/04/03 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python selenium循环登陆网站的实现
2019/11/04 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
四年的大学生生活自我评价
2013/12/09 职场文书
村官工作鉴定评语
2014/01/27 职场文书
男性健康日的活动方案
2014/08/18 职场文书
人事代理委托书
2014/09/27 职场文书
教师师德师风整改措施
2014/10/24 职场文书