reactquill中图片上传由默认转成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)
    }
}