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

使用react-quill富文本编辑器，里面处理图片是默认转成base64，提交到后台的时候文件太大，

使用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)
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。