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

链接: https://fly63.com/article/detial/6181