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与其它库冲突的解决方法
Jun 25 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
React 源码中的依赖注入方法
2018/11/07 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
护士求职推荐信范文
2013/11/23 职场文书
给老师的道歉信
2014/01/11 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
人事专员工作职责
2014/02/22 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
幼儿园运动会口号
2014/06/07 职场文书
大学生军训感言
2015/08/01 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript