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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
vue之数据交互实例代码
Jun 20 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
node.js express框架简介与实现
Jul 23 Javascript
javascript中正则表达式语法详解
Aug 07 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
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python3简单实现微信爬虫
2015/04/09 Python
python结合API实现即时天气信息
2016/01/19 Python
Python 类的继承实例详解
2017/03/25 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
numpy返回array中元素的index方法
2018/06/27 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
出纳岗位职责
2013/11/09 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
小学生思想品德评语
2014/12/31 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书